Avatar billede andersasp Nybegynder
25. februar 2010 - 08:47 Der er 1 kommentar og
1 løsning

Standard tekst i tekstfelt driller lidt

Hej,

Jeg har nedenstående script som virker rigtig godt. Det indsætter en standard tekst i grå, og når man så klikker i tekst feltet markerer den det hele.. der er dog lige et problem som jeg ikke ved hvordan jeg skal løse..

Hvis jeg sletter alt tekst i et felt, og derefter prøver at skrive noget, så hopper standard teksten tilbage, ved det første tegn man skriver.. ?? hvilket den jo helt ikke skal :)

<script>

function setColor(){
    document.getElementById('username').style.color = "grey";
    document.getElementById('password').style.color = "grey";
}

function clearText(field, act){
    if (act == 'focus') {
        field.select();
    } else if (act == 'blur') {
        if (field.defaultValue == field.value || field.value == '') {
            field.value = field.defaultValue;
            field.style.color = "grey";
        } else {
            field.style.color = "black";
        }
    }
}

function changeText(field){
    if (field.defaultValue == field.value)
    {
        field.value = '';
        field.style.color = "black";
    }
    else if (field.value == '')
    {
        field.style.color = "grey";
        field.value = field.defaultValue;
    }
    else
    {
        field.style.color = "black";
    }
}

</script>

<body onload="setColor();">

<input name="username" id="username" onfocus="clearText(this, 'focus')" onblur="clearText(this, 'blur')" onkeypress="changeText(this);" value="Enter Your Email Address" style="width:99%" type="text">

<input name="password" onfocus="clearText(this, 'focus')" onblur="clearText(this, 'blur')" onkeypress="changeText(this);" type="password" id="password" style="width:99%" value="password"/>

<input type="submit" name="Submit2" value="Login"/>
Avatar billede intenz Novice
25. februar 2010 - 18:04 #1
Det er din changeText funktion der gør det. Den gør også (stort det) det samme som clearText. Udover at clearText ikke ændrer farven på teksten til sort.

Med en lille ændring i clearText kan du fjerne dine onkeypress events, og så vil problemet forsvinde.

Så du får dette resultat:

<script>

function setColor(){
    document.getElementById('username').style.color = "grey";
    document.getElementById('password').style.color = "grey";
}

function clearText(field, act){
    if (act == 'focus') {
        field.select();
    field.style.color = "black";
    } else if (act == 'blur') {
        if (field.defaultValue == field.value || field.value == '') {
            field.value = field.defaultValue;
            field.style.color = "grey";
        } else {
            field.style.color = "black";
        }
    }
}


</script>

<body onload="setColor();">

<input name="username" id="username" onfocus="clearText(this, 'focus')" onblur="clearText(this, 'blur')" value="Enter Your Email Address" style="width:99%" type="text">

<input name="password" onfocus="clearText(this, 'focus')" onblur="clearText(this, 'blur')" type="password" id="password" style="width:99%" value="password"/>

<input type="submit" name="Submit2" value="Login"/>
Avatar billede andersasp Nybegynder
03. marts 2010 - 07:45 #2
Hejsa,

Det er helt perfekt, tusinde tak for det :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester