JS & FF3: cursor verdwijnt

[aaajeetee]

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:

<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

[gvanh]

Hmm ... lastig. Ik heb niet echt een oplossing voor jouw benadering.
Ik weet wel dat de oplossing die ik gevonden heb het door jouw genoemde probleem niet heeft.

Kijk eens naar de website www.bvfplatform.nl.
En dan meer specifiek naar het bestand http://www.bvfplatform.nl/inc/jscripts/include.js.

Er gebeuren daar een hoop dingen, maar wat voor jou - denk ik - van belang is:
- De functie "init()" wordt aangeroepen na het laden van de pagina.
- In deze init() functie wordt aan alle inputs waarvoor een "deftxt" (default text) attribuut is opgegeven, een eventhandler toegevoegd voor het "focus" en "blur" event.
- In deze event handlers wordt vervolgens één en ander geregeld, wat ook in FF 3.0 zonder problemen werkt (ook cursor verhaal).

Kijk maar even of je je weg hierin kan vinden of dat het onduidelijk is.

Het is wellicht wat brak om niet op jouw code in te gaan en alleen maar te wijzen op mijn oplossing, maar aan de andere kant: als je d'rmee geholpen bent: hoera!

[Sebazzz]

Firebug, en dan stap voor stap debuggen. Werkt heel goed.

[apokalypse]

Ik weet dat Firefox (in ieder geval in het verleden) wat cursor bugs heeft.
click-google

[aaajeetee]

Dank jullie voor de replies

FireBug heb ik en maak ik veel gebruik van, maar die heeft me voor dit probleem nog niet kunnen helpen.

Ik zal de gegeven linkjes eens bestuderen en kijken of ik er wat mee kan!


De site die gvanh gaf werkt! Ik heb het script even uitgepluisd en her en der ietsje aangepast, en deze doet het nu in alle browsers (FF, IE, Opera en Safari).

Top, echt hartelijk bedankt!

[ Voor 32% gewijzigd door aaajeetee op 08-07-2008 10:46 ]