Inline labels i asp.net

Hvad med at kigge på asp.net ajax, der kan du bruge TextBoxWatermark, som netop er lavet til det formål:

asp.net ajax - TextBoxWatermark

Her er et plugin til jquery der af hjælper dette problem.

 (function($){
  $.fn.autofill = function(options) {
 
   var defaults = {
         password: false,
         swapclass: ''
   };
     
   var options = $.extend(defaults, options);
     
   return this.each(function() {
         obj = $(this);
         var type = obj.attr('type');
         var title = obj.attr('title');
 
         if(title =! '' && (type == 'text' || type == 'password')) {
             if(obj.val() == ''){
                 if(type == 'password') obj = createAutofillObject(obj, 'text');
                 obj.val(obj.attr('title'));
                 handleInputFocus(obj, type);
             }
         }
         
   });
  };
 })(jQuery);
 
 function handleInputFocus (obj, type) {
     obj.focus(function(){
         if(obj.val() == '' || obj.val() == obj.attr('title')) obj.val('');
         if(type == 'password'){
             obj = createAutofillObject(obj, 'password');
             obj.focus();
         }
         handleInputBlur(obj, type);
     });
 }
 
 function handleInputBlur (obj, type) {
     obj.blur(function(){
         if(type != 'password') if(obj.val() == '' || obj.val() == obj.attr('title')) obj.val(obj.attr('title'));    
     });
 }
 
 function createAutofillObject (obj, type) {
     var rep = $("<input type='"+type+"' />").attr("style", obj.attr("style") != null ? obj.attr("style") : '').attr("id", obj.attr("id")).attr("name", obj.attr("name")).attr("class", obj.attr("class")).attr("title", obj.attr("title")).val(obj.val()).insertBefore(obj);
     obj.remove();
     return rep;
 }

Title angiver default teksten.

 <asp:TextBox id="tbUsername" class="autofill" title="Username">
 <asp:TextBox id="tbPassword" class="autofill" title="Kodeord">

jQuery kode der sætter autofill på de angivede værdier.

 $("input.autofill").autofill();

Hvad siger panelet til denne metode:

Min textbox er

<asp:TextBox ID="TextBox_LoginBrugernavn" Text="Brugernavn" class="password" MaxLength="18" runat="server"></asp:TextBox>

og så i sidens page_load metoder laver jeg en:

this.TextBox_LoginBrugernavn.Attributes["onclick"] = "this.value=''";


Har jeg overset noget farligt her? Det virker fint, men måske har jeg overset noget.

*edit*

Jeg havde overset noget. Password input felter kan ikke have defaultværdier :-(

Så en anden løsning søges stadigvæk

Fedt, tusind tak begge to. I har reddet min aften :-)

Alternativt kan du bruge HTML5 attributten placeholder på input felter. <input type="text" placeholder="Hej Brian!">

Det kommer an på hvor vigtigt det er at vise det til browsere som ikke det. Evt kan man supplere med et javascript fallback. Hvis du loader det med yepnope / modernizr for browsere som ikke understøtter placeholder attributten. Og det bedste ved det hele er, at placeholder attributten stadig er i DOM selvom browseren ikke understøtter den. Med jQuery kunne du loope over alle input felter med en placeholder attribut, og gøre noget der gav mening med den - et eksempel på det:

 $("input[placeholder]").each(function() {
   val = $(this).attr("placeholder");
 });

Eller måske bare lave en funktion på input med placeholder og textarea med placeholder og focusin/focusout events.

Eller du kan bruge et fallback som findes i forvejen. Der er links til flere her og det er vel også en slags reference for mit indlæg :-) http://html5please.com/#input[placeholder]

Her er et plugin til jquery der af hjælper dette problem.

Det virker fint, men der er et enkelt issue omkring password-feltet. Teksten vises fint ved page load, men klikker man i feltet og derefter i et andet felt, så kommer teksten ikke tilbage igen.

Det ser ud til at det kun er felter at typen "password" som har problemet. Alm. input felter af typen text har ikke problemet.