Question

我使用了一个jquery（From this source）解决方案来让占位符在IE中显示但由于某种原因它不能用于我页面中的隐藏字段。

如果您在此处查看此DEMO，则可以在输入地址和邮政编码后点击添加人员按钮，点击添加人员即可创建一些文字字段。

问题是占位符没有显示那些新生成的字段。此外，默认情况下会显示zip的验证消息。

$(function() {
    var input = document.createElement("input");
    if(('placeholder' in input)==false) { 
        $('[placeholder]').focus(function() {
            var i = $(this);
            if(i.val() == i.attr('placeholder')) {
                i.val('').removeClass('placeholder');
                if(i.hasClass('password')) {
                    i.removeClass('password');
                    this.type='password';
                }           
            }
        }).blur(function() {
            var i = $(this);    
            if(i.val() == '' || i.val() == i.attr('placeholder')) {
                if(this.type=='password') {
                    i.addClass('password');
                    this.type='text';
                }
                i.addClass('placeholder').val(i.attr('placeholder'));
            }
        }).blur().parents('form').submit(function() {
            $(this).find('[placeholder]').each(function() {
                var i = $(this);
                if(i.val() == i.attr('placeholder'))
                    i.val('');
            })
        });
    }

Answer 1

jQuery代码仅为代码运行时存在的元素配置事件。之后创建的元素不会附加这些事件。

为了使动态事件与设置事件后创建的新元素一起使用，您需要使用jQuery $.on()方法而不是$().focus()或$().blur()方法

您应该替换现有的事件处理程序，如下所示：

$('[placeholder]').on("focus", function(){ .... });

这将使占位符事件对动态创建的元素做出反应。

或者，您可以考虑尝试使用其他可用的占位符polyfill脚本 - 其中有相当多的脚本。 See here以获取一些链接。

Answer 2

使用代码fiddle：

$('.test').on('click', function () {
        if(!$("#signupForm").valid()){
            return;
        }            
        if (c<5){
            $('#loops').append( HTMLloop(++c) );
            setPlaceholder()
        }            
    });

需要在创建新字段后调用占位符功能

这是一个coll占位符plugin。

Answer 3

见

.test{
display:inline-block;
background:red}

对于zip的消息

IE中的HTML输入字段占位符

3 个答案: