この基本的なjQueryコードを改善するにはどうすればよいですか？

Question

基本的なjQueryで手を汚しています。私は任意のテキストボックスに "defaultValue"属性を追加して、フォーカスを当ててボックスをクリアし、その値が空白の場合はデフォルト値をテキストボックスに再挿入したいと考えています。私はこれを行うための基本的なカップルを考え出しましたが、より良い方法がありますか？私は

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

• .ready()

• 利用.focus()代わりのため$(function() { });ショートカットを使用して...二つの別々の方法に依存しないjQueryの機能のいくつかの例を見て思い出すように見えます.click()

• DOMから一度だけ$('input[type=text]')を選択します。 jQueryオブジェクトに対してメソッド呼び出しを連鎖させることができます。

• はtext入力のvalueとdefaultValueを取得するために.val()を使用しないでください。それらは完全なブラウザ間の互換性を持つ要素のプロパティ名から直接アクセスできます。あなたが望んでいた場合は

• は、あなたが'input:text'

---

EDITに'input[type=text]'からセレクタを短縮することができます：は浮遊)を削除しました。

また、@jAndy'sの提案に基づいて、blurイベントのif()文の式は、唯一の空白文字を持っている文字列をテストするために変更されました。私は単一+演算子を使ってこれを行いました。 jAndyが提案する代替案は、 [using] jQueryの$.trim()メソッドを使用することです。あなたは両方のイベントのための単一の機能が必要な場合

、あなたはこれを行うことができます：

$(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：+が得られますので、は、@jAndyはもともと提案されているよう$.trim()を使用するように変更しました入力が"0"の場合、または" 0 "の場合は不適切な結果になります。

Answer 2

私が昨日書いたのとまったく同じ機能を共有したかっただけです。

違いは、それがデフォルトのテキストをグレーということである焦点にすべてを選択し、主にテキストの色を変更しないように：それは代わりに、負荷上のデフォルトのテキストを設定しますが、（明らかに内部の$（FUNC）

$('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'); 
      } 
     }); 
    }); 

を投げます