![[quote]](images/icons/oldquote.gif "Quote bericht - Bericht is meer dan 4 weken oud!"){kind=icon}
Door: Ik heb nu een (login)formulier, met daarin velden voor username en password (en een submit button).
Standaard moet er in deze velden een tekst getoond worden (d.m.v. JavaScript). Dit is prima gelukt met onfocus en onblur.
Nou krijg ik een vreemde bug in FireFox: wanneer ik op het password veld klik (krijgt de focus, dus wordt de prefilled waarde verwijderd), zie ik geen cursor. Wel kan ik gewoon typen.
Wanneer ik er dus text inzet en ik klik ergens anders en dan weer op het wachtwoord veld, heb ik mijn cursor weer wel
Ik heb op Google gezocht en heb enkele bugs in FireFox (2) gevonden, waarbij de cursor verdwijnt bij elementen met een overflow.
Deze overflow zit er bij mij nergens in en ook heb ik geprobeerd door de overflow op het bovenliggende én hetzelfde element op hidden / none te zetten. Dit had geen (gewenst) resultaat.
Ook kwam ik nog een andere oplossing tegen; de position op fixed (of relative) zetten. Ook dit leverde geen (gewenst) resultaat op.
Onderstaande is mijn code. Ik weet dat het te maken heeft met het veranderen van het type (van text naar password). Maar ik heb geen idee hoe ik dit zou kunnen oplossen.
Ik hoop dat jullie me verder kunnen helpen
code:
De ##...## worden door de Template parser vervangen
Edit: ook heb ik geprobeerd om met die textrange-functies iets te bereiken, dit werkte helaas ook niet
Standaard moet er in deze velden een tekst getoond worden (d.m.v. JavaScript). Dit is prima gelukt met onfocus en onblur.
Nou krijg ik een vreemde bug in FireFox: wanneer ik op het password veld klik (krijgt de focus, dus wordt de prefilled waarde verwijderd), zie ik geen cursor. Wel kan ik gewoon typen.
Wanneer ik er dus text inzet en ik klik ergens anders en dan weer op het wachtwoord veld, heb ik mijn cursor weer wel
Ik heb op Google gezocht en heb enkele bugs in FireFox (2) gevonden, waarbij de cursor verdwijnt bij elementen met een overflow.
Deze overflow zit er bij mij nergens in en ook heb ik geprobeerd door de overflow op het bovenliggende én hetzelfde element op hidden / none te zetten. Dit had geen (gewenst) resultaat.
Ook kwam ik nog een andere oplossing tegen; de position op fixed (of relative) zetten. Ook dit leverde geen (gewenst) resultaat op.
Onderstaande is mijn code. Ik weet dat het te maken heeft met het veranderen van het type (van text naar password). Maar ik heb geen idee hoe ik dit zou kunnen oplossen.
Ik hoop dat jullie me verder kunnen helpen
code:
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| <form id = "loginform" action = "login.php" method = "POST">
<fieldset id = "loginform_fields" style="overflow-x: hidden;">
<input id = "login_username" tabindex = "1" type = "text" value = "" name = "username" onfocus = "javascript: inputFocus(this);" onblur = "javascript: inputBlur(this);">
<input id = "login_password" tabindex = "1" type = "password" value = "" name = "password" onfocus = "javascript: inputFocus(this);" onblur = "javascript: inputBlur(this);">
</fieldset>
</form>
<script type = "text/javascript">
function inputFocus(fieldObj) {
if (fieldObj.className == "inputPrompt") {
if (fieldObj.id == "login_password") {
//change field type and reset obj reference
changeInputType("login_password", "password");
fieldObj = document.getElementById("login_password");
}
fieldObj.value = "";
fieldObj.className = "";
fieldObj.select();
fieldObj.focus();
}
return;
}
function inputBlur(fieldObj) {
if (fieldObj.value == "") {
if (fieldObj.id == "login_password") {
//change field type and reset obj reference
changeInputType("login_password", "text");
fieldObj = document.getElementById("login_password");
fieldObj.value = "##_password##";
} else {
fieldObj.value = "##_username##";
}
fieldObj.className = "inputPrompt";
}
return;
}
function changeInputType(objID, oType) {
var oldObject = document.getElementById(objID);
try {
oldObject.setAttribute("type", oType);
} catch(e) {
var newObject = document.createElement("input");
newObject.type = oType;
if(oldObject.value) newObject.value = oldObject.value;
if(oldObject.size) newObject.size = oldObject.size;
if(oldObject.name) newObject.name = oldObject.name;
if(oldObject.id) newObject.id = oldObject.id;
if(oldObject.onfocus) newObject.onfocus = oldObject.onfocus;
if(oldObject.onblur) newObject.onblur = oldObject.onblur;
if(oldObject.className) newObject.className = oldObject.className;
if(oldObject.tabIndex) newObject.tabIndex = oldObject.tabIndex;
oldObject.parentNode.replaceChild(newObject,oldObject);
}
return;
}
function setPrompts() { //Run onload of the page
if (document.getElementById("login_username").value == "##_username##" || document.getElementById("login_username").value.length < 1) {
document.getElementById("login_username").value = "##_username##";
document.getElementById("login_username").className = "inputPrompt";
}
if (document.getElementById("login_password").value == "##_password##" || document.getElementById("login_password").value.length < 1) {
changeInputType("login_password", "text");
document.getElementById("login_password").value = "##_password##";
document.getElementById("login_password").className = "inputPrompt";
}
return;
}
setPrompts();
</script> |
De ##...## worden door de Template parser vervangen
Edit: ook heb ik geprobeerd om met die textrange-functies iets te bereiken, dit werkte helaas ook niet
