0

placeholderHTML5属性の動作を少し「偽造」する小さな関数を作成しようとしています。これを行うプラグインがすでに存在することは知っていますが、jQueryを本当に上手にしたいと思っているので、自分で作成したいと思います。

これまでのところ、これは私が信じていることです。不要なものを見つけたら教えてください。

  1. 関数呼び出しでは、DOMで特定のフォームを検索し、CSSクラスを任意の入力フィールド/テキストエリアに追加しinput[type="submit"]ます<button>。
  2. 値がある場合、その値は、。のように、入力の/textareaのIDとともに配列またはオブジェクトに配置されます#myInputID => initial value。
  3. フォーカスすると、CSSクラスが削除され、現在の値が配列/オブジェクト内に存在するかどうかがチェックされます。値が見つかった場合は削除され、input/textareaは空になります。見つからない場合は何も起こらず、値は残ります。
  4. ぼかしの際、フィールドが空かどうか、または現在の値が配列/オブジェクトにあるかどうかがチェックされます。見つかった場合、または入力の/ textareaの値が空の場合、CSSクラスを再度追加するとともに、オブジェクト/配列の最初の値が再度配置されます。配列またはオブジェクトに値が見つからない場合、値は残り、CSSクラスは再追加されません。

次のようなコードでは、次のようになります。

function placeholder( element ) {
  var values = [];
  console.log( values );

    $( element ).find( ":input" ).each( function() {
      var $this = $( this );

      // adding CSS class
      $this.addClass( "light" );

      if( $this.val() ){
        // adding value to array
        // the key is missing, maybe add an id to the elements?
        values.push( $this.val() );
      }

      $this.focus( function(){
        // remove CSS class
        $this.removeClass( "light" );

        // if value is in array  
        var i = $.inArray( $this.val() , values );
        if( i != -1 ) {
          $this.val( "" );
        }
      })// focus

      $this.blur(function(){
        // setting value to inital value if needed
        // add CSS class
        var i = $.inArray( $this.val() , values );
        if( i == -1 ) {
          $this.val( "initalValue" );
          $this.addClass( "light" );
        }
      })// blur

    }) // each
} // function

placeholder( "form" );

もちろん、まだ完成しておらず、まだいくつかの問題があります（まだ機能していません...）が、私は自分でそれを解決することはできません。これらは私の主な問題です：

  • キー=>値のペアを保存するために配列またはオブジェクト（ハッシュマップ？）を使用する必要がありますか？ここSOでも、これについてさまざまな意見を見つけました。そして、どのように値を比較しますか？そのような配列/オブジェクトに値をプッシュするにはどうすればよいですか？
  • ある時点で、をキャッシュすることをお勧めし$this.val()ます。これを行うのに最適な場所はどこですか？
  • コードに関する主要なパフォーマンスの問題はありますか？
  • ぼかしイベントがトリガーされたときに、ユーザーが何も入力していない場合は、値を初期値にリセットする必要があります。要素を識別するためのキーが配列にないため、これは機能していません。

クイックテスト用のフィドルは次のとおりです。フィドル

4

2 に答える 2

1

あなたが作っているほど複雑ではありません...

jQuery :

$('#myform').
on('focus', '.autoclear', function () {
    if (this.value === this.defaultValue) {
        this.value = '';
    }
    $(this).removeClass('blur').addClass('focus');
}).
on('blur', '.autoclear', function () {
    if (this.value === '') {
        this.value = this.defaultValue;
    }
    $(this).removeClass('focus').addClass('blur');
});

HTML :

実際のデモ: http://jsfiddle.net/L2pfW/

<input type="text" name="field" value="name" class="autoclear" />
于 2013-02-12T16:29:34.447 に答える
1

キーと値のペアを保存するには、連想配列のようにアクセスするオブジェクトを使用します。キーは、値を含む入力フィールドに固有のものでなければなりません (ID など)。だからあなたの次の例から取って....

if( $this.val() ){
     // adding value to array
     values[$this.attr('id')] = $this.val();
}

この時点で、値の取得は簡単になります。要素の ID を使用するだけです。また、ID で検索できるようになったため、values 配列全体を検索して値を探す必要もなくなりました。したがって、そこでもパフォーマンスが向上します。

于 2013-02-12T16:28:28.690 に答える