Comment utiliser systématiquement select() lors de la mise au point sur un champ? C'est possible?

Question

J'ai récemment créé un nouveau formulaire pour mon site, avec les étiquettes intégrées dans les champs de formulaire lui-même - comme le «titre» lorsque vous posez une question sur ce site.

Vous pouvez le voir ici: (défilement vers le bas)

J'avais initialement l'étiquette disparaître dès que le terrain se est concentré, mais a décidé qu'il serait préférable de le laisser jusqu'à ce que l'utilisateur commence à taper, parce que sinon ils pourraient oublier ce que le champ est en fait pour

le seul problème est que le caret est alors dans le texte de l'étiquette et il ne sait pas qu'il disparaîtra lorsque vous commencez à taper.

Voici mon code (oui, piraté en morceaux):

var keypressed = false; 

    // for each input field with a title 
    $('input[title], textarea[title]').each(function() { 

     // if it has no value 
     if($(this).val() === '' || $(this).attr('title')) 
     { 

      // add the labeled class 
      $(this).addClass('labeled'); 

      // set the value to the title 
      $(this).val($(this).attr('title')); 

     } 

     // when focused 
     $(this).focus(function() 
     { 

      // select the whole field 
      $(this).select(); 

      // if the value is the label/title 
      if($(this).val() === $(this).attr('title')) 
      { 

       // wait for keypress 
       $(this).keypress(function() { 

        // if first key pressed 
        if(keypressed == false) 
        { 
         // clear the field and remove labeled class 
         $(this).removeClass('labeled').val(''); 

         // set keypressed to true so next keypress doesn't clear field again 
         keypressed = true; 
        } 
       }); 
      } 
     }).click(function() 
     { 

      // select the whole field 
      $(this).select(); 

     }); 

     // when undocused 
     $(this).blur(function() { 

      // if blank 
      if($(this).val() === '') { 

       // add labeled class and title/label 
       $(this).addClass('labeled').val($(this).attr('title')); 
      } 
      else 
      { 
       if($(this).val() === $(this).attr('title')) 
       { 
        $(this).addClass('labeled'); 
       } 


      } 



      // set keypressed to false for next field 
      keypressed = false; 

     }); 

    }); 

Vous remarquerez que j'ai mis select() onfocus et onclick mais il ne fonctionne toujours pas toujours. C'est étrange. Quelqu'un s'il vous plaît aviser si c'est même nécessaire ou si je devrais faire comme stackoverflow.com de poser une question?

Toute aide très appréciée, et désolé pour décousu mais je me sens toujours il est préférable de donner plus d'informations que pas assez :)

Merci à tous,

Drew

Answer 1

Comme mentionné plus haut, quelqu'un a posté ce lien, qui est une excellente solution à ce problème.

http://fuelyourcoding.com/scripts/infield