1

まだ持っていないブラウザーにプレースホルダー機能を追加するこの作業コードがあります。

$(document).ready(function() {

    //show placeholder text when browser doesn't support placeholder attribute
    if(!Modernizr.input.placeholder){
        $('[placeholder]').focus(function() {
          var input = $(this);
          if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
          }
        }).blur(function() {
          var input = $(this);
          if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
          }
        }).blur();
        $('[placeholder]').parents('form').submit(function() {
          $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
              input.val('');
            }
          });
        });

    }
});

問題は、プレースホルダーを使用してフィールドを動的に追加すると、上記のコードではそれらが表示されないことです。FF は新しいプレースホルダーを表示しますが、IE は表示しません。私の理解では、.delegate()jQuery で現在および将来の DOM 要素の両方を監視する場合は、使用する必要があります。そこで、関数を以下のように書き直してみました。ここにjsFiddleがあります。残念ながら、新しいバージョンは、既存のプレースホルダーにも動的に追加されたプレースホルダーにも作用しません。私は何を間違えましたか？

$(document).ready(function() {

    if(!Modernizr.input.placeholder){
        $('form').delegate('[placeholder]','focus',function() {
          var input = $(this);
          if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
          }
        }).delegate('[placeholder]','blur', function() {
          var input = $(this);
          if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
          }
        }).blur();
        $('[placeholder]').parents('form').submit(function() {
          $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
              input.val('');
            }
          });
        });

    }
});
4

2 に答える 2

0 
$(document).ready(function() {

    if(!Modernizr.input.placeholder){
        $('form').on('focus', '[placeholder]',function() {
          var input = $(this);
          if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
          }
        }).on('blur', '[placeholder]', function() {
          var input = $(this);
          if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
          }
        }).blur();
        $('[placeholder]').parents('form').submit(function() {
          $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
              input.val('');
            }
          });
        });

    }
});
于 2013-02-04T16:22:32.583 に答える
0

.on() イベントhttp://api.jquery.com/on/を使用してみましたか? 「直接および委任されたイベント」から下を読むと、それがどのように機能するかが説明されています。私はそれがあなたの問題を解決するはずだと思います。ハンドルバーのような論理のないテンプレートを使用する場合、同様の問題に使用します。

于 2013-02-04T16:12:49.190 に答える