Eksempeltekst i inputfields

Jeg bruger det her på min hjemmeside.

 <input
  type="text"
  name="sogetekst"
  value="Søg..."
  onfocus="if(this.value=='Søg...')this.value='';"
  ondrop="if(this.value=='Søg...')this.value='';"
  onblur="if(this.value=='')this.value='Søg...';"
 >

Du kan prøve det oppe til højre på min hjemmeside : http://scootergrisen.dk/

Jeg prøvede også med placeholder attributten men skiftede tilbage da jeg hellere ville have det virkede i flere browsere.

nu har jeg ikke testet det her, men det må være noget i den her stil, hvis du vil lave et fallback hvis det er en browser uden HTML5.

 <input type="text" name="i1" placeholder="test value" />
 
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript">
   //script her.
 </script>

 $(function(){
   
   //hvis ikke HTML5 er understøttet:
   if(!isCanvasSupported()){
     
     //Find alle inputs der har en placeholder
     $.each($("input[placeholder!='']"), function(i, obj){
 
         //on enter
         $(obj).focus(function(){
           if($(this).val() == $(this).attr("placeholder")){
             $(this).val("");
           }
         });
         
         //on leave
         $(obj).blur(function(){
           if($(this).val().length == 0){
             $(this).val($(this).attr("placeholder"));
           }
         });
 
     }); //end foreach
   } //end if
 }); //end jQuery doc ready
 
 function isCanvasSupported(){
   var elem = document.createElement('canvas');
   return !!(elem.getContext && elem.getContext('2d'));
 }

Jeg tror lidt den druknede, så her kommer den lige igen.

En ren Javascript placeholder polyfill, med feature detection. Testet og virker i Webkit, Firefox og Opera. I må endelig gerne teste den for mig i IE og komme med rettelser om nødvendigt.

 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;
      }
    }
  }

Man kan bruge placeholder som de andre nævner. ellers skal du have gang i noget javascript:

Ved ikke helt om du kan bruge dette, ellers skal du selv kode det
http://unwrongest.com/projects/defaultvalue/

@Gustav det er selvfølgelig rigtigt, men så syntes jeg også det er overkill, at loade yepnope til, at hente 1 fil. Hvorfor så ikke bare hente filen med jQuery's $.getscript ... hvis han alligevel bruger jQuery. yepnope hjælper jo ikke med, at checke om placeholder understøttes

Du har ret igen :-)

Så mit bud, på vores fælles bud, ser cirka sådan her ud:

 if (!('placeholder' in document.createElement('input'))) { $.getScript("placeholder_polyfill.js" }

Men...

Det tager jo tid at loade det asynkront og et placeholder polyfill, burde ikke fylde ret meget. Desuden er det jo vigtigt, at placeholder værdier vises med det samme, hvis man bruger dem som labels for sine felter, så de er der, selv hvis man har en bruger der med det samme går i gang med at bruge felterne. Derfor burde jo lave det inline, så superbrugerne ikke skal vente på at det bliver hentet efter page load. Desuden bør det jo ikke afhænge af jQuery - det er jo et stort library, og det er et simpelt problem vi har.

 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); };
     }
   }
 }

Så skal det jo bare minifies... :p

Test på jsFiddle: http://jsfiddle.net/REqUH/

Så vil jeg sku også lave en version!

 <input type="text" value="ostemad">
 <input type="text" value="banan">
 <input type="text" value="leverhørmer">
 <input type="text" value="abemad">
 <input type="text" value="hotdog">

 $("input[type=text]").each(
     function(i,elm) {
         var $this = $(this),
             val = $this.val();
 
         $this
             .focus(function(e) {
                 $this
                     .val('')
                     .addClass("selected");
             })
             .blur(function(e) {
                 if($this.val() == "") {
                     $this
                         .val(val)
                         .removeClass("selected");
                 }
             });
     }
 );

 input[type="text"] { color: #aaa; }
 input.selected { color: #000; }

Resultatet

placeholder attributten er en del af HTML 5 og understøttes derfor ikke nødvendigvis af alle browsere endnu, og slet ikke tidligere versioner. Jeg ville personligt nok holde mig til noget JavaScript lidt endnu, om ikke andet så i hvert fald som fallback.

Mvh.

Kasper (TSW)

prøv at ændre sætningen e.target.value = null til e.target.value = ''

Det der sker er nok at ie tror det er en string null og ikke værdien null. Derfor prøver vi med en tom streng - da det burde have samme resultat...

Sidste revidering af omtalte kode, for referencens skyld.

 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 = ''; } };
   
     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;
       }
     }
   }

@Kenneth, Det var godt :-) Selv tak!