Avatar billede lasserasch Juniormester
15. april 2010 - 12:42 Der er 8 kommentarer og
1 løsning

Tilføje OnFocus og OnBlue til tekstbokse on the fly

Hejsa...

Jeg vil gerne lave en javascript function som finder alle textbox elementer / dvs. input tags på en side og tilføje et onblur og onfocus event til dem alle.


Jeg forsøger med følgende kode. Men får fejl om at "Attributes" er null eller ikke et objekt. Nogen som kan se hvad fejlen er?





function InputFieldStyling()
{
    var inputs = document.getElementsByTagName('input');

    for(var k=0;k<inputs.length;k++) {
        var input = inputs[k];
        var value = input.value;       
       
        input.Attributes.Add("onfocus", "java script:if(this.value=='" + value + "') {this.value=''}");
        input.Attributes.Add("onblur",  "java script:if(this.value=='') {this.value='" + value + "'}");
    }
}



MVh.
Lasse
Avatar billede lasserasch Juniormester
15. april 2010 - 12:49 #1
Never mind. Fik det til at virke....


Nedenstående virker fint.

function InputFieldStyling()
{
    var inputs = document.getElementsByTagName('input');

    for(var k=0;k<inputs.length;k++) {

        var value = inputs[k].value;

        inputs[k].setAttribute("onfocus", "java script:if(this.value=='" + value + "') {this.value=''}");
        inputs[k].setAttribute("onblur", "java script:if(this.value=='') {this.value='" + value + "'}");
    }
}
Avatar billede lasserasch Juniormester
15. april 2010 - 12:50 #2
svar
Avatar billede softspot Forsker
15. april 2010 - 12:52 #3
Umiddelbart ville jeg mene det skulle være således:

function InputFieldStyling()
{
    var inputs = document.getElementsByTagName('input');

    for(var k=0;k<inputs.length;k++) {
        var input = inputs[k];
        var value = input.value;       
       
        input.onfocus = new Function("", "if(this.value=='" + value + "') {this.value=''}");
        input.onblur = new Function("", "if(this.value=='') {this.value='" + value + "'}");
    }
}
Avatar billede softspot Forsker
15. april 2010 - 12:54 #4
OK. Hvis det fungerer med setAttribute er det nok bedre :)

Er du religiøs i forhold til ikke at benytte jQuery?
Avatar billede lasserasch Juniormester
15. april 2010 - 16:07 #5
Nej, jeg er mere C#/Code Behind mand. Men er nok ved at indse at Javascript kan en ting eller 2...

Jeg ved godt JQuery kan en masse, men jeg tager det sådan lidt af gangen og lærer noget nyt Javascripting hver dag :-)


Mvh.
Lasse
Avatar billede olebole Juniormester
18. april 2010 - 20:22 #6
<ole>

Du kan ikke bruge setAttribute til at sætte en event. Til det bruges addEventListener og attachEvent - alt efter, hvad browseren understøtter. Det andet er ikke standard og virker kun i visse browsere  ;o)

softspot >> Når du bruger new Function, parses funktionens statements, hvergang event'en udløses. Det sker ikke, når du i stedet bruger en function expression:

Functions defined by function expressions and function declarations are parsed only once, while those defined by the Function constructor are not. That is, the function body string passed to the Function constructor must be parsed every time it is evaluated. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "new Function(...)". Therefore the Function constructor should be avoided whenever possible.

https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Functions_and_function_scope#Function_constructor_vs._function_declaration_vs._function_expression[/div]

/mvh
</bole>
Avatar billede olebole Juniormester
18. april 2010 - 20:25 #7
Hmmm ... Eksperten og dens 'formatering'  :o|

Du kan ikke bruge setAttribute til at sætte en event. Til det bruges addEventListener og attachEvent - alt efter, hvad browseren understøtter. Det andet er ikke standard og virker kun i visse browsere  ;o)

softspot >> Når du bruger new Function, parses funktionens statements, hvergang event'en udløses. Det sker ikke, når du i stedet bruger en function expression:

Functions defined by function expressions and function declarations are parsed only once, while those defined by the Function constructor are not. That is, the function body string passed to the Function constructor must be parsed every time it is evaluated. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "new Function(...)". Therefore the Function constructor should be avoided whenever possible.


https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Functions_and_function_scope#Function_constructor_vs._function_declaration_vs._function_expression

Håber, det hjalp  =)
Avatar billede lasserasch Juniormester
18. april 2010 - 22:29 #8
Tjaee.... Kan godt være det måske ikke standard. Det ved jeg ikke så meget om, men det virker fint i IE7, IE8 og nyeste FF. Det er godt nok til mig :-) Så virker det for 99,99% af alle besøgende på sitet.

Mvh.
Lasse
Avatar billede olebole Juniormester
18. april 2010 - 22:37 #9
Nej, det virker ikke i IE7/XP. Det er ikke godt nok til mig, men hvis det er ligemeget, om dine brugere har gavn af din kode, så har du jo ingen problemer. Det betyder dog ikke, fremgangsmåden virker i morgen  =)
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