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

JS, Onload Focus??

Door Pietje Hansen op 17-04-2006 14:12
1.896 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>
Willem Jan Z
17-04-2006 14:13
Je geeft zelf het antwoord :S

onload="focus();"
Jan Koehoorn
17-04-2006 14:14 

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

function init () {
    document.getElementById ('username').focus ();
}
</script>


BELANGRIJK: behalve name="username" moet je ook id="username" in je form hebben staan, anders werkt het niet.
Jan Koehoorn
17-04-2006 14:22
@ Joran: de methode van Willem-Jan werkt volgens mij ook, maar ik streef ernaar om JS en HTML gescheiden te houden.

edit: net even gekeken maar volgens mij is er geen onload event voor inputs. Dan moet het dus volgens de methode die ik gaf.
P
Pietje Hansen
17-04-2006 14:24
laat ik dat ook maar doen dan!
Jan Koehoorn
17-04-2006 14:27
Okee, en als je het dan echt netjes wilt doen, dan kun je het script nog iets uitbreiden:


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

function init () {
    var _username = document.getElementById ('username');
    _username.blur ();
    _username.focus ();
    _username.select ();
}
</script>


Die blur is voor Opera, anders werkt het daar geloof ik niet. Die select is voor het geval er al tekst in de input staat. Dan kan een gebruiker meteen beginnen met typen.

edit: code nog iets korter gemaakt
Willem Jan Z
17-04-2006 14:30
Netjes :)

Ik dacht dat onload overal kon :) Maar ik ben ook een non JS gebruiker :) Alleen voor external links met XHTML1.1
P
Pietje Hansen
17-04-2006 14:41
Ik had zelf, ook al problemen met Opera, thanks!
Jan Koehoorn
17-04-2006 14:43
Okee graag gedaan :-)
P
Pietje Hansen
17-04-2006 14:45
Als ik de tweede uit het document moet hebben, werkt dit dan?

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

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 ();
}
}
}
</script>

Reageren

Inloggen om te reageren