[js]getAttribute('value') op <input> geeft foute waarde

[cyberstalker]

Om een of andere duistere reden denkt javascript dat een textbox altijd leeg is. De functie wordt getriggerd door een eventlistener.

JavaScript:

function restoretext(evtObj)
{
    // which textbox are we looking at
    var textbox = evtObj.target

    if (textbox.getAttribute('value') != '')
    {
        // dit gebeurt dus niet!
        return false;
    }
    
    if (textbox.getAttribute('type') == 'text')
    {
        textbox.setAttribute('value', 'gebruikersnaam');
        textbox.setAttribute('class', 'initial');
    }
    
    if (textbox.getAttribute('type') == 'password')
    {
        textbox.setAttribute('value', 'wachtwoord');
        textbox.setAttribute('class', 'initial');
    }

}

Zoals je ziet, wordt er alleen iets gedaan wanneer de tekstbox oorspronkelijk leeg is. Dit is echter niet het geval. Zodra de functie getriggerd wordt, wordt altijd de stijlwijziging toegepast, de door de gebruiker ingevoerde tekst blijft wel netjes staan.

Heeft iemand enig idee waar dit aan kan liggen?

[Juup]

bij value kun je beter textbox.value gebruiken dan textbox.getAttribute('value')

[crisp]

Als je de initial value wilt hebben moet je de defaultValue property uitvragen.
Ik zou sowieso om problemen met een zekere brower te vermijden DOM level 1-style properties uitvragen en wijzigen (dezelfde browser die target niet ondersteund als event-property, maar ik hoop dat je er een *goede* crossbrowser event-implementatie achter hebt hangen als die ueberhaupt bestaat)

[ Voor 67% gewijzigd door crisp op 14-05-2006 23:40 ]

[cyberstalker]

crisp schreef op zondag 14 mei 2006 @ 23:37:
Als je de initial value wilt hebben moet je de defaultValue property uitvragen.

Die wil ik dus juist niet hebben. Maar dat is wel wat ik lijk te krijgen.

Als ik het zonder getAttribute doe, blijkt het inderdaad wél te werken. Maar het blijft vreemd, het komt op mij als over als een soort van bug.

Iets anders wat ik nu dus pas merk is dat als de gebruiker al iets in de textbox heeft gewijzigd je de value kunt blijven wijzigen met setAttribute('value'... zonder enig effect. Is hier iets tegen te doen?

[ Voor 21% gewijzigd door cyberstalker op 14-05-2006 23:39 ]

[André]

Met getAttribute haal je de originele waarde op die in het attribuut staat. Probeer eens textbox.value

/edit:
Ik moet sneller typen

[ Voor 15% gewijzigd door André op 14-05-2006 23:39 ]

[crisp]

* crisp moet sneller editten

[cyberstalker]

Ik vind het toch merkwaardig. Als ik i.p.v. getAttribute en setAttribute rechtstreek de waarden benader gaat alles prima, maar anders loopt alles mis.

Ik heb altijd begrepen dat het rechtstreeks benaderen van properties van de DOM-objecten niet de bedoeling is, en dat je dus beter getAttribute en setAttribute kunt gebruiken.

[crisp]

cyberstalker schreef op zondag 14 mei 2006 @ 23:46:
Ik vind het toch merkwaardig. Als ik i.p.v. getAttribute en setAttribute rechtstreek de waarden benader gaat alles prima, maar anders loopt alles mis.

Niet alle attributen zijn op deze manier te bewerken, denk bijvoorbeeld ook aan inline styles (ok, cssText ) en inline script (browser afhankelijk though). Form-values zijn ook een vreemde eend in de bijt (denk bijvoorbeeld ook aan een textarea welke een value property heeft in JS maar niet in de HTML).

Ik heb altijd begrepen dat het rechtstreeks benaderen van properties van de DOM-objecten niet de bedoeling is, en dat je dus beter getAttribute en setAttribute kunt gebruiken.

Says who? Voor standaard attributen/properties zijn ECMAScript bindings gespecificeerd in DOM level 1, die kan je dus (en moet je soms) gewoon gebruiken - scheelt je nog een method-call ook

DOM level 2 attribute setters/getters opereren op een heel ander level dan ECMAScript bindings gedefinieerd voor interfaces; er is overlap maar het is niet uitwisselbaar.

[ Voor 24% gewijzigd door crisp op 15-05-2006 00:01 ]

[Verwijderd]

er is gewoon een verschil tussen attributen en properties, zoals crisp al aangeeft hebben veel attributen een binding met een property, maar dat is niet a priori het geval.

in het geval van een input wordt de waarde in een value property opgeslagen, ik zie ook niet waarom dat in een attribuut zou moeten.

Iets anders dat ik bijvoorbeeld gebruik is type="date" op een input zetten. Zoiets is nog nergens geimplementeerd, waardoor de property op "text" uitkomt, het attribuut is echter nog steeds "date". Hierdoor kan je dus met wat js best een aardige widget bouwen.