Avatar billede andersasp Nybegynder
26. januar 2010 - 10:10 Der er 6 kommentarer og
1 løsning

Tekst felt onclick grå tekst og marker alt

Hejsa,

Jeg har nedenstående script som skulle være et cool login script, hvor standard teksten i et tekstfelt skulle stå i grå.. når man så klikkede på det markerede det hele teksten, og hvis man forlader det popper standard teksten tilbage..

Men i f.eks. firefox er teksten ikke grå som standard, og i explorer får den faktisk browseren til at crashe, så denne skal genstartes..

Aner ikke hvad der går galt, men vil rigtig gerne bruge dette script, og måske andre også kunne få gavn af det :)


Håber der er nogle som kan hjælpe!

På forhånd tak

<script>

function setColor(){
    emailaddress.style.color = "grey";
}

function clearText(field){
    if (field.defaultValue == field.value)
    {
        field.style.color = "grey";
        //field.value = '';
        //field.value = field.defaultValue;
        //field.focus();
        //field.select();
    }
    else if (field.value == '')
    {
        field.style.color = "grey";
        field.value = field.defaultValue;
    }
    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>
</head><body onload="setColor();">
<p>
  <input name="emailaddress" onfocus="clearText(this)" onblur="clearText(this)" onkeypress="changeText(this);" value="Enter Your Email Address" size="70" type="text">
Avatar billede intenz Novice
26. januar 2010 - 10:33 #1
Der er ikke noget i dit script der vil gøre, at den crasher i IE (virker også fint her).

Hvis du vil have det skal virke cross-browser (i firefox), bør du hente dine elementer på den rigtige måde.

Du bruger:
emailaddress.style.color = "grey";

Hvilket kalder elementets navn direkte. Hvis du sætter:
id="emailaddress"
på dit input element og så ændrer javascript koden til:
document.getElementById('emailaddress').style.color = "grey";

Så virker det i firefox.
Avatar billede andersasp Nybegynder
26. januar 2010 - 11:13 #2
Nej undskyld, jeg glemte lige at vedhæfte "field.focus();" nu kager den helt vildt i explorer.. jeg har lavet den ændring som du foreslog.. hvilket fik den til at være grå til start :)


<script>

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

function clearText(field){
    if (field.defaultValue == field.value)
    {
        field.style.color = "grey";
        //field.value = '';
        //field.value = field.defaultValue;
        field.focus();
        field.select();
    }
    else if (field.value == '')
    {
        field.style.color = "grey";
        field.value = field.defaultValue;
    }
    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>


<input name="username" onfocus="clearText(this)" onblur="clearText(this)" onkeypress="changeText(this);" value="Enter Your Email Address" type="text" id="username" style="width:99%" />
Avatar billede intenz Novice
26. januar 2010 - 11:21 #3
Hvorfor vil du have den focus med?

Så vidt jeg kan se bliver den enten kørt når du har focus og så er der ingen grund til at køre focus igen.
Ellers bliver den kørt når du kører blur, og den tvinger så til focus igen og fanger brugeren, så man ikke kan komme væk fra feltet.
Avatar billede andersasp Nybegynder
26. januar 2010 - 11:26 #4
det er fordi det er et login script, så istedet for at brugeren selv skal slette alt teksten, så markerer den blot hele teksten så det er let at slette.. dvs. den skal bare markere alt teksten når man klikker første gang..

Hvad skal jeg fjerne for at få dette til at virke?

På forhånd tak
Avatar billede intenz Novice
26. januar 2010 - 11:40 #5
Det behøver du ikke at bruge focus til. Der er select(); nok.

Hvis jeg var dig ville jeg ændre den måde du kalder funktionen på, så du ved om det er blur eller focus der bliver kaldt. Det gør det lidt nemmere at styre.

Så input ser sådan ud:
<input name="emailaddress" id="emailadd" onfocus="clearText(this, 'focus')" onblur="clearText(this, 'blur')" onkeypress="changeText(this);" value="Enter Your Email Address" size="70" type="text">

Altså med en parameter mere på clearText kaldet.

Og så ændre clearText til f.eks.:

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";
        }
    }
}
Avatar billede andersasp Nybegynder
26. januar 2010 - 11:51 #6
Fantastisk, nu virker det bare :)

men lærer noget nyt og brugbart hver dag :)

tusinde tak for det!
Avatar billede intenz Novice
26. januar 2010 - 12:00 #7
Helt i orden :)
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