Wie kann ich diesen grundlegenden jQuery-Code verbessern?

Question

Ich fange gerade an, meine Hände mit etwas grundlegendem jQuery schmutzig zu machen. Ich möchte in der Lage sein, ein "DefaultValue" -Attribut zu jedem Textfeld hinzuzufügen und dann das Feld im Fokus zu löschen und dann den Standardwert in das Textfeld einzufügen, wenn der Wert leer ist. Ich habe mir ein paar grundlegende Funktionen ausgedacht, aber gibt es einen besseren Weg? Ich glaube mich zu erinnern, einige Beispiele von jQuery-Funktionen zu sehen, die auf zwei verschiedenen Methoden beruhen nicht ...

$(document).ready(function() { 
     $('input[type=text]').click(function() { 
      var defaultValue = $(this).attr('defaultValue'); 
      if ($(this).val() == defaultValue) 
       $(this).val(''); 
     }); 
     $('input[type=text]').blur(function() { 
      var defaultValue = $(this).attr('defaultValue'); 
      if ($(this).val() == '') 
       $(this).val(defaultValue); 
     }); 
    }); 

Answer 1

$(function() { 
    $('input[type=text]').focus(function() { 
     if (this.value == this.defaultValue) 
      this.value = ''; 
    }) 
    .blur(function() { 
     if (!$.trim(this.value)) 
      this.value = this.defaultValue; 
    }); 
}); 

• Verwenden Sie die $(function() { }); Abkürzung für .ready()

• Verwenden .focus() statt .click()

• Wählen Sie nur $('input[type=text]') aus dem DOM einmal. Sie können Methodenaufrufe für ein jQuery-Objekt verketten.

• Verwenden .val() nicht die value und defaultValue eines text Eingang zu erhalten. Sie sind direkt über den Eigenschaftsnamen des Elements mit voller browserübergreifender Kompatibilität zugänglich.

• Wenn Sie wollten, könnten Sie den Schalter von 'input[type=text]' zu 'input:text'

---

EDIT verkürzen: entfernt, um ein Streu ).

Auch basierend auf @jAndy's Vorschlag, der Ausdruck in der if() Aussage der blur Veranstaltung wurde für Strings zu testen geändert, die nur Leerzeichen haben. Ich habe den unären Operator + dazu verwendet. Eine Alternative, wie von jAndy vorgeschlagen, wäre [mit] jQuerys $.trim() Methode.

Wenn Sie eine einzelne Funktion für beide Veranstaltungen möchten, können Sie dies tun:

$(function() { 
    $('input[type=text]').bind('focus blur', function (e) { 
     if (e.type === 'focus' && this.value == this.defaultValue) 
      this.value = ''; 
     else if (e.type === 'blur' && !$.trim(this.value)) 
      this.value = this.defaultValue; 
    }); 
}); 

---

EDIT: es geändert $.trim() zu verwenden, wie @jAndy ursprünglich vorgeschlagen, da die + wird eine geben falsches Ergebnis, wenn der Eingang "0" oder " 0 " ist.

Answer 2

Ich wollte nur die gleiche Funktion teilen, die ich gestern schrieb.

Unterschied zu nicht ist, dass es den Standardtext abgeblendet, Fokus wählt alle auf, die Textfarbe ändert, und vor allem: Er legt den Standardtext auf Last statt (natürlich in $ (func) werfen

$('input:text').each(function(){ 
     $(this).val($(this).attr('placeholder')).css('color','#999'); 
     $(this).focus(function(){ 
      // If value is same as 'placeholder', clear field 
      if(this.value == $(this).attr('placeholder') 
       && $(this).css("color") == 'rgb(153, 153, 153)'){ 
       $(this).val('').css('color','#000'); 
      } else { // Else select the whole text (one less click) 
       $(this).select(); 
      } 
     }); 
     $(this).blur(function(){ 
      // On blur, if empty field, put placeholdr back 
      if (!$.trim(this.value)){ 
       $(this).val($(this).attr('placeholder')).css('color','#999'); 
      } 
     }); 
    }); 

Ich bin mir sicher, dass es besser gemacht werden kann, aber es funktioniert gut.