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 回答