PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
P

JS, Onload Focus??

Door Pietje Hansen op 17-04-2006 14:12
1.892 views
Ik heb deze code, maar ik wil dat de pagina als hij laad naar het textfield username in de form loginfull focus.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml"; lang="nl">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title></title>
<link href="http://localhost/joranbbbeta/css/joranbb.css" media="screen" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/joranbb.js"></script>
</head>
<body>
<div id="container"><div id="loginbox">
<span class="logintxt">Welkom Gast ( <a href="index.php?act=viewlogin">Inloggen</a> )</span>
<form id="loginform" class="form" method="post" action="index.php?act=login">
<input value="Gebruikersnaam" class="txtfield" name="username" />&nbsp;
<input class="txtfield" name="password" value="Wachtwoord" type="password" />
&nbsp;<input type="submit" class="button" name="submit" value="Inloggen" />
</form>
</div>
<br /><table id="jbb_login" cellspacing="0">
<tbody>
<tr>
<td class="c1">Inloggen</td>
</tr>
<tr>
<td class="c2">Gelieve uw informatie hieronder in te voeren om in te loggen</td>
</tr>
<tr>
<td class="c3">
<form class="form" id="loginfull" method="post" action="index.php?act=login">
Gebruikersnaam<br />
<input size="35" class="txtfield" name="username" /><br /><br />
Wachtwoord<br />
<input class="txtfield" size="35" name="password" type="password" /><br />
<br />
Wachtwoord vergeten?<br />
<br />
<input class="button" name="submit" value="Inloggen" type="submit" /><br />
</form>
</td>
</tr>
</tbody>
</table>
<div id="errorbox"><h1>1&nbsp;fouten deden zich voor:</h1>1. The file containing the online users does not exist<br /></div></div>
<br />
<div id="footer">
<br />
Pagina gegenereerd in 0.0164 seconde(n)
</div>
</body>
</html>
Jan Koehoorn
17-04-2006 15:06
Misschien wel, maar je kunt beter rechtstreeks het element benaderen dat de focus moet krijgen via zijn id.


<script type="text/javascript">
window.onload = init;

function init () {
    var _username = document.getElementById ('vulhierhetidvanhetelementin');
    _username.blur ();
    _username.focus ();
    _username.select ();
}
</script>
P
Pietje Hansen
17-04-2006 15:10
maar nu heb ik dit gemaakt, en het werkt niet?

function init () {
var _usernames = document.getElementsByName ('username');
for(i=0;i<_usernames.length;i++) {
if(i==1) {
_usernames[i].blur ();
_usernames[i].focus ();
_usernames[i].select ();
}
_usernames[i].style.backgroundColor = '#F8F8F8';
_usernames[i].onFocus = input_focus (_usernames[i]);
_usernames[i].onBlur = input_blur (_usernames[i]);
}
var _passwords = document.getElementsByName ('password');
for(j=0;j<_passwords.length;j++) {
_passwords[j].style.backgroundColor = '#F8F8F8';
_passwords[j].onFocus = input_focus (_passwords[j]);
_passwords[j].onBlur = input_blur (_passwords[j]);
}
}

function input_focus (_object) {
_object.style.border = '1px solid #CCCCCC';
_object.style.backgroundColor = '#FFFFFF';
}

function input_blur (_object) {
_object.style.border = '1px solid #DDDDDD';
_object.style.backgroundColor = '#F8F8F8';
}
Jelmer -
17-04-2006 15:22
Hint: gebruik de javascript error-console in Firefox, in het menu onder "extra's". Die geeft een gedetailleerde foutmelding.
Jan Koehoorn
17-04-2006 15:27
Even wat veranderd aan je code:


function init () {
	var _usernames = document.getElementsByName ('username');
	for(i=0;i<_usernames.length;i++) {
		if(i==1) {
			_usernames[i].blur ();
			_usernames[i].focus ();
			_usernames[i].select ();
		}
		else {
			_usernames[i].style.backgroundColor = '#F8F8F8';
			_usernames[i].onFocus = input_focus (_usernames[i]);
			_usernames[i].onBlur = input_blur (_usernames[i]);
		}
	}

	var _passwords = document.getElementsByName ('password');
	for(j=0;j<_passwords.length;j++) {
		_passwords[j].style.backgroundColor = '#F8F8F8';
		_passwords[j].onFocus = input_focus (_passwords[j]);
		_passwords[j].onBlur = input_blur (_passwords[j]);
	}
}

function input_focus (_object) {
	_object.style.border = '1px solid #CCCCCC';
	_object.style.backgroundColor = '#FFFFFF';
}

function input_blur (_object) {
	_object.style.border = '1px solid #DDDDDD';
	_object.style.backgroundColor = '#F8F8F8';
}
Jan Koehoorn
17-04-2006 15:32
Oh dan weet ik het al: waarschijnlijk zit er een foutje in de code.
- SanThe -
17-04-2006 15:42
Jan Koehoorn schreef op 17.04.2006 15:32
Oh dan weet ik het al: waarschijnlijk zit er een foutje in de code.


Lol. Dat is nou bijna altijd het probleem met al die 'niet werkende' scripts.

Groetjes en een knipoog....
P
Pietje Hansen
17-04-2006 15:43
Zo:

<input size="35" class="txtfield" name="username" onFocus="input_focus(this)" onBlur="input_blur(this)" />

werkt het wel!

Reageren

Inloggen om te reageren