JS, Onload 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" />
<input class="txtfield" name="password" value="Wachtwoord" type="password" />
<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 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>
onload="focus();"
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script type="text/javascript">
window.onload = init;
function init () {
document.getElementById ('username').focus ();
}
</script>
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.
edit: net even gekeken maar volgens mij is er geen onload event voor inputs. Dan moet het dus volgens de methode die ik gaf.
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
window.onload = init;
function init () {
var _username = document.getElementById ('username');
_username.blur ();
_username.focus ();
_username.select ();
}
</script>
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
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Ik dacht dat onload overal kon :) Maar ik ben ook een non JS gebruiker :) Alleen voor external links met XHTML1.1
<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.blur ();
_usernames.focus ();
_usernames.select ();
}
}
}
</script>
Gewijzigd op 01/01/1970 01:00:00 door Pietje Hansen
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
window.onload = init;
function init () {
var _username = document.getElementById ('vulhierhetidvanhetelementin');
_username.blur ();
_username.focus ();
_username.select ();
}
</script>
window.onload = init;
function init () {
var _username = document.getElementById ('vulhierhetidvanhetelementin');
_username.blur ();
_username.focus ();
_username.select ();
}
</script>
function init () {
var _usernames = document.getElementsByName ('username');
for(i=0;i<_usernames.length;i++) {
if(i==1) {
_usernames.blur ();
_usernames.focus ();
_usernames.select ();
}
_usernames.style.backgroundColor = '#F8F8F8';
_usernames.onFocus = input_focus (_usernames);
_usernames.onBlur = input_blur (_usernames);
}
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';
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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';
}
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:
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....
<input size="35" class="txtfield" name="username" onFocus="input_focus(this)" onBlur="input_blur(this)" />
werkt het wel!