Actief Topic: [JavaScript] Standaard-waarde in een text-input

Soms kan het best handig zijn om een standaard-waarde in een text-input te hebben. Je kun bijvoorbeeld bij een formulier om je aan te melden voor een nieuwsbrief dit gebruiken: [code=html]<form> <input type="text" name="naam" value="Vul je naam in" /><br /> <input type="text" name="email" value="Vul je email-adres in" /><br /> <input type="submit" value="verzenden" /> </form>[/code] Maar als je nu op het input-veld klikt, moet je eerst nog handmatig de standaardtekst verwijderen. En als je dat heb gedaan en je laat het veld leeg achter, dan blijft ie ook leeg. Allemaal dingen die niet heel gebruiksvriendelijk zijn. Eerst gaan we de html maar eens veranderen. We gaan er dit van maken: [code=html]<form> <input type="text" name="naam" standaard="Vul je naam in" /><br /> <input type="text" name="email" standaard="Vul je email-adres in" /><br /> <input type="submit" value="verzenden" /> </form>[/code] Het attribuut 'standaard' bestaat helemaal niet (is is dus officeel ook niet valide). Dat heb ik zelf verzonnen. Dit alleen zal dus ook niks doen. Daar is een javascript voor nodig. In dez javascript kun je ook de attribuutnaam wijzigen. Dus je kunt ervoor kiezen om bv. 'title' te nemen. Een valide oplossing: [code=javascript]// vul hier de attribuutnaam in die je wil gebruiken. var standaard_attr = 'standaard'; $(document).ready(function(){ $("input[" + standaard_attr + "]").each(function(){ $(this).focus(function(){ if($(this).is(".standaard")) { $(this).removeClass('standaard').val(''); } }).blur(function(){ if($(this).val() == '' || $(this).val()==$(this).attr(standaard_attr)) { $(this).addClass('standaard').val($(this).attr(standaard_attr)); } }).blur(); }); $("form").submit(function(){ $(this).find("input[class='standaard']").each(function(){ $(this).val(''); }); }); });[/code] [b][u]LET OP!![/u] Ik maak gebruik van jQuery, zorg ervoor dat je in je html-document ook een verwijzing maakt naar jquery.js, te downloaden op http://jquery.com/[/b] Als je net als Erwin een code zonder jQuery wil gebruiken, dan verwijs ik je door naar [url=http://sckripts.nl/forum/T94.1/Tutorials/JavaScript-Standaard-waarde-in-een-text-input/#795]2 postst naar beneden[/url]. [u]Update's code:[/u] [b]11-7-2010[/b]: bugje gefixed bij het wissen van de standaard-waardes bij het verzenden van het formulier. (jQuery-functie 'children' vervangen door 'find') Wat deze javascript doet is het volgende: - Ieder input-veld met een standaardwaarde krijgt, als de pagina geladen is, die waarde als value en de class 'standaard' wordt toegevoegd. Hierdoor kan je de standaard-waarde bv. een lichter kleurtje geven. Ik heb dit in mijn css staan: [code=css]input.standaard { color:#999999; }[/code] - als je dan op het veld klikt (of er naartoe 'tabt') dan verdwijnt de standaardwaarde en de class 'standaard' verdwijnt als de class 'standaard' aanwezig is. Als die namelijk niet aanwezig is, dan staat er een input van de gebruiker, en die moet natuurlijk niet weggehaald worden. - als je dan van het veld weg gaat, dan kijk ie of het veld leeg is, of de standaardwaarde bevat. Zo ja: dan de standaardwaarde erin zetten en de class standaard toevoegen, zo nee: dan doet ie niks. het inputveld heeft dan niet de class standaard, ziet er dus ook normaal uit, en hij wordt niet gewist als er op geklikt wordt. - nog een belangrijk iets. Als het formulier verzonden wordt, dan moeten natuurlijk niet de standaardwaardes verzonden worden. Wat de deze javascript ook doet is als er een formulier verzonden wordt, alle waardes van alle inputs met de class 'standaard' (dus die bevat de standaardwaarde) leeg gemaakt. Een online voorbeeld: http://moehahahaha.netau.net/voorbeeld/js_standaard_tekst.php

Ik heb een paar opmerkingen bij dit artikel: -Allereerst: Ik zie het nut van het gebruiken van jQuery hier niet helemaal. Als je het gewoon 'zelf' in javascript schrijft, ben je korter uit (nog excl. de jQuery js!). En je code is nu veel lastiger dan gewone simpele regeltjes. -Je gebruikt een zelf verzonnen attribuut. Dan is je html niet meer valid... Je kan toch veel beter iets als title of rel gebruiken? :O

Speciaal voor Erwin dan maar een code zonder jQuery: [code=javascript]// vul hier de attribuutnaam in die je wil gebruiken. var standaard_attr = 'standaard'; window.onload = function(){ var inputs = document.getElementsByTagName('input'); for(i=0; i<inputs.length; i++) { if(inputs[i].getAttribute(standaard_attr)) { inputs[i].onfocus = function(){ if(this.className == 'standaard') { this.className = ''; this.value = ''; } } inputs[i].onblur = function(){ if(this.value == '' || this.value == this.getAttribute(standaard_attr)) { this.className = 'standaard'; this.value = this.getAttribute(standaard_attr); } } inputs[i].className = 'standaard'; inputs[i].value = inputs[i].getAttribute(standaard_attr); } } var forms = document.getElementsByTagName('form'); for(f=0; f<forms.length; f++) { forms[f].onsubmit = function(){ var form_inputs = this.getElementsByTagName('input'); for(f_i=0; f_i<form_inputs.length; f_i++) { if(form_inputs[f_i].className == 'standaard') { form_inputs[f_i].value = ''; } } } } }[/code] Als ik nog een reden moet geven waarom ik jQuery gebruik: Ik zelf vind het erg fijn werken, dus ik doe tegenwoordig bijna alles met jQuery. Dus automatisch deze tutorial ook. En daarbij komt ook nog eens dat de jQuery-code korter is dan de "normale" js-code. En de belangrijkste reden: jQuery werkt in iedere browser. Van deze code weet ik dat niet zeker! En om Erwin weer helemaal gerust te stellen heb ik een regel erbij gezet waarmee je de attribuut-naam kan wijziging. Je kun dus nu in principe iedere naam nemen die je wil. [b]EDIT: ik heb ff gecontroleerd: rel is ook geen valide attribuut![/b] Zo goed?

[quote=superkluns]EDIT: ik heb ff gecontroleerd: rel is ook geen valide attribuut![/quote] Oke, dan heb ik rel niet genoemd. :P Voor input heb je nog wel het name attribuut dat gebruikt kan worden :) Je code is wel iets anders dan ik dacht. Ik dacht dat je het gewoon met onfocus/onblur in de html deed. Ik heb toevallig pas iets gemaakt met mijn beperkte javascript kennis dat één input moest handelen. code: [code=javascript]function change(input){ input.style.backgroundPosition = '0px 0px'; input.style.color = '#777487'; if(input.value == '010-123456789'){ input.value= ''; } } function changeBack(input){ input.style.backgroundPosition = 'bottom left'; input.style.color = '#cec3c3'; if(input.value == ''){ input.value = '010-123456789'; } }[/code] Dit verplaatst dus de background, veranderd de value en font color.

[quote=Erwin]Voor input heb je nog wel het name attribuut dat gebruikt kan worden[/quote] Lijkt me niet heel handig, aangezien die gebruikt wordt als naam in de verwerking van het formulier. Als je het per se valide wil houden, zou ik 'title' gebruiken [quote=Erwin]Ik dacht dat je het gewoon met onfocus/onblur in de html deed[/quote] Das niet heel gebruiksvriendelijk, moet je bij iedere input een onfocus en onblur erbij schrijven. Ook is het veel mooier om je html-pagina javascript vrij te houden. En als ik zo 1 blik werp op dat javascriptje van jou, dan ziet dat er wel redelijk uit. Maar zoals je zelf al zei: t is voor maar 1 input. Die van mij is in het algemeen te gebruiken.

Daar heb je natuurlijk wel volledig gelijk in.