Avatar billede extream Nybegynder
28. august 2007 - 08:23 Der er 4 kommentarer

rydning af flere tekstbokse vha. addlistener

Jeg har en side med flere tekstbokse, hvor jeg ønsker en funktion som fungere på følgende måde.
på onfocus ryddes teksten, hvis det er tekstboksens standard værdi.
På onfocus skiftes class name til "second"
På onblur sættes tekstboksens standard værdi hvis boksen er tom.
På onblur skiftes class name til "first"

Jeg har prøvet lidt selv her, men det funger ikke helt endnu, og er ikke dynamisk.

--------------------kode------------------
<html>
<head><title></title>
<script type="text/javascript" language="javascript">
<!-- Hide from browsers without javascript
var txtTextbox = "firstname"
function addListener(oNode, sEventType, fnHandler)
{
    //If there are prior event handler functions
    //that have been assigned to this event handler,
    //then save them:
    if(oNode[sEventType])
        var oldfuncs = oNode[sEventType];
   
    //Assign new function to the
    //element's event handler:
    oNode[sEventType] = function ()
    {
        if (oldfuncs) oldfuncs();
        fnHandler();
    }
}

//Test out the addListener() function:
window.onload=function()
{
    var div = document.getElementById("d");
    addListener(div, "onfocus", clear);
}

function clear()
{
    var inputs = document.getElementsByTagName("input");
        for (i=0; i < inputs.length; i++) {
            inputs[i].onfocus=function() {this.className='second'};
                inputs[i].onfocus=function() {this.value=''};
            inputs[i].onblur=function() {this.value=txtTextbox};
       
        }
}
   
   
// End hiding -->
</script>
</head>
<style type="text/css">
.first{
    color: #999;
}
.second{
    color: #000;
}
</style>
<body>


<input type="text" class="first" value="firstname" id="d" />


<input type="text" class="first" value="lastname" id="d" />


</body>
</html>
Avatar billede olebole Juniormester
28. august 2007 - 14:40 #1
<ole>

Undgå skiftaf CSS-klasser ... det performer elendigt  ;o)
    <input type="text"
        onfocus="this.style.color='#000';if(this.value==this.defaultValue)this.value=''"
        onblur="this.style.color='#999';if(this.value=='')this.value=this.defaultValue">

/mvh
</bole>
Avatar billede extream Nybegynder
31. august 2007 - 14:47 #2
Jeg kan ikke bruge onfocus og onblur på input feltet, det skal kunne gøres uden at ændre på input felterne.
Avatar billede olebole Juniormester
31. august 2007 - 15:24 #3
Så sætter du dem bare med attachEvent i IE og addEventListener i FF, Opera, m.fl:

<script type="text/JavaScript">
function attachListener(oElm, sType, fn) {
    if (oElm.addEventListener) oElm.addEventListener(sType, fn, false);
    else if (oElm.attachEvent) oElm.attachEvent("on"+sType, fn);
    else oElm["on"+sType] = fn;
}

window.onload = function() {
    var o = document.getElementById("gnu");
    attachListener(o, "focus", function(){o.style.color='#000';if(o.value==o.defaultValue)o.value=''});
    attachListener(o, "blur", function(){o.style.color='#999';if(o.value=='')o.value=o.defaultValue});
}
</script>

<input id="gnu" type="text" value="Hallo">
Avatar billede extream Nybegynder
03. september 2007 - 08:10 #4
Hvadså hvis jeg vil have det til at virke på flere tekstbokse. f.eks. firstname og lastname skal man bruge deres idér eller kan man bruge deres klasser?
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