Eksempeltekst i inputfields

@Kenneth, hmm... Skørt - eneste forskel på koden herpå sitet og på jsfiddle er at jeg på js-fiddle bruger parameteret data-placeholder frem for placeholder - min browser understøtter jo placeholder, og derfor blev jeg nød til at fake en anden attribut. Med koden her på sitet skal du kun bruge placeholder og ikke data-placeholder. Kan det være det der er gået galt? (Har læst dit kode eksempel nu- og det er faktisk det der er problemet :-))

@dan, hehe - mit indlæg var faktisk mest for sjov. For lige at tage den skridtet videre ud af tangenten ;-)

Jeg bruger som regel jQuery hvis jeg skal lave komplicerede ting. Det er noget nemmere at arbejde med end javascript imo - primært på grund af query-selektorerne.

Men jeg synes tit at man ser folk der trækker jQuery ind til alt for simple ting (for eksempel et polyfill som dette). Hvis man har en side som i forvejen bruger jquery til en masse fornuftige ting er det selvfølgeligt ok at bruge et jquery polyfill.

At downloade jQuery er næppe noget problem. Som regel er det jo, som du siger, cached - hvis man ellers bruger googles (eller et andet populært) CDN. Men man skal jo trodsalt parse de 32kb javascript alligevel. Den bliver parset på hver request, og det er jo spild af kræfter :-)

Men helt generelt, så skal man passe på med den slags mikrooptimering som vi har gang i her. Tit og ofte, så kan det ende med man bruger alt for meget energi på et alt for lidt væsentligt område. Trafik er sjældent særligt dyrt, og det er også relativt sjældent at man finder sig selv arbejdende på sider hvor et par kb pr request gør en væsentlig forskel. I hvert fald hvis man har styr på sin caching og i øvrigt ikke koder som en båtnakke. :-)

jeg syntes aldrig rigtigt jeg får styr på cachingen og minifying .. syntes altid der er for meget besvær ved det... for de projekter jeg arbejder med lige pt. er nogen der stadig er underudvikling

@Gustav, har nu rettet det til placeholder igen, men den laver stadig samme nummer og den tekst der skulle være pladsholder forsvinder ikke når jeg klikker i feltet. Har testet i både IE9, Chrome og Firefox 11.
Javascriptet(value.js) ser jo således ud:

 if (!('placeholder' in document.createElement('input'))) { 
   var inputArray = document.getElementsByTagName('input');
   for (var i = 0; i < inputArray.length; i++) {
     if ((inputArray[i].getAttribute('type') == 'text') && (inputArray[i].getAttribute('placeholder') != '')) {
       if ((inputArray[i].getAttribute('value') === '') || (inputArray[i].getAttribute('value') === null)) {
         inputArray[i].setAttribute('value', inputArray[i].getAttribute('placeholder'));
       }
       inputArray[i].onblur = function() { (function(el) {
        if (el.getAttribute('value') === '') {
           el.setAttribute('value', el.getAttribute('placeholder'));
         }
       })(this); };
       inputArray[i].onfocus = function() { (function(el) {
           if (el.getAttribute('value') === el.getAttribute('placeholder')) {
             el.setAttribute('value', '');
           }
       })(this); };
     }
   }
 }

Og min form ser således ud efter at have rettet tilbage til placeholder:

 <form name="login" action="http://localhost/eksamensprojekt/inc/auth.php" method="post">
 Brugernavn: <input type="text" name="username" placeholder="username" /> Password: <input type="password" name="password" placeholder="password" /> <input type="submit" name="submit" value="Log ind" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript" src="js/value.js"></script>
 </form>

@Kenneth, den virker ikke på input type=password - det giver nemlig ikke ret meget mening. Men du kan godt kode den om så den gør det, hvis det er.

Jeg forstår ikke helt hvorfor det volder dig problemer - det ser ud til at virke fint i Chrome. Men det er nok noget med forskellig implementation af onblur/onfocus. Det er vidst ikke helt kontinuerligt i alle browsere. Hvilket er grund nok i sig selv til at bruge jQuery ;-)

Men her kommer i hvert fald en udgave som virker i Opera, Chrome, Safari og Firefox. Krydser fingre mht IE. ;-)

 if (!('placeholder' in document.createElement('input'))) {
   var inputArray = document.getElementsByTagName('input');
   function onblurcallback (e)  { if (!e.target.value) { e.target.value = e.target.getAttribute('placeholder'); } };
   function onfocuscallback (e) { if (e.target.value === e.target.getAttribute('placeholder')) { e.target.value = null; } };
 
   for (var i = 0; i < inputArray.length; i++) {
     if ((inputArray[i].type == 'text') && (inputArray[i].getAttribute('placeholder') != '')) {
       inputArray[i].value  = (!inputArray[i].value) ? inputArray[i].getAttribute('placeholder') : inputArray[i].value;
       inputArray[i].onblur  = onblurcallback;
       inputArray[i].onfocus = onfocuscallback;
     }
   }
 }

@dan, du skal jo heller ikke cache eller minify'e før du er færdig med at udvikle :-)

Jeg synes man har de bedste muligheder i javascript via JQuery lige pt. Jeg bruger selv følgende kode til det:

var original_val = '';
var field = $('#feltid');
field.click(function(event) {
if (field.val() != '' && field.val() != undefined)
original_val = field.val();
if (field.val() == original_val) {
field.val('');
}
});
field.blur(function() {
if (field.val() == '') {
field.val(original_val);
}
});

@dan, hvorfor bruger du value attributten? Du kan sagtens bruge placeholder selvom browseren ikke understøtter den. Og så behøver du ikke at gemme værdien i en variabel.

Og hvis man skriver noget i et input felt, og mister fokus, og vender tilbage senere, så nulstiller den også feltets værdi. :-)

Desuden, så vil din placeholder tekst jo kunne submittes hvis du bruger value til at have den i. Så pludselig hedder alle dine kunder Jens Jensen og deres telefon nummer er 88 88 88 88.

Google er din ven: jquery watermark

@gustav ... i know... det er bevidst, det er en feature ikke en bug!

@dan, det virker som om det kun ville være anvendeligt i en meget specifik use-case. Men det kan være der er noget jeg overser?

Det er i hvert fald ikke i overensstemmelse med hvordan placeholder-attributten bliver implementeret i browsere og det var det jeg gik efter :-)

@gustav - yes... I know, det var også bare for, at komme med et andet eksempel end det der var i forvejen. Der var trodsalt heller ingen der endnu havde vist det eksempel jeg giver med, at toogle classes.

@Jens Stigaard

Google er din ven: jquery watermark

Hvorfor kaldet det et watermark ... når det ER en placeholder, jeg forstår dem ikke helt