Question

我正在使用此链接上的document.ready上调用的Jquery Input现代化函数： http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

在我的JavaScript代码中，我向DOM添加了2个INPUT框。如何动态绑定这些输入对象，使它们显示与文档准备就绪时存在的输入框相同的功能。

var add= '<input type="text" size="75" placeholder="This is a Comment" id="txtComment" />'
+ '<br /><input type="text" placeholder="2012-03-24" id="txtDate" /><br /><button id="submit">Submit</button>';

$(this).html(addTargetForm);


function modernizer_init() {
    if (!Modernizr.input.placeholder) {

        $('[placeholder]').onfocus(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('');
                }
            })
        });

    }
}

Answer 1

这应该直接在$(function(){...})结构内部工作，但如果这是您的应用程序需要的话，请务必将其放在function modernizer_init() {}中。

的javascript：

$("body").on('focusin', '[placeholder]', function(evt) {
    var $input = $(evt.target);
    if ($input.val() == $input.attr('placeholder')) {
        $input.val('');
        $input.removeClass('placeholder');
    }
}).on('focusout', '[placeholder]', function(evt) {
    var $input = $(evt.target);
    if ($input.val() == '' || $input.val() == $input.attr('placeholder')) {
        $input.addClass('placeholder');
        $input.val($input.attr('placeholder'));
    }
}).on('submit', 'form', function(evt) {
    var $form = $(evt.target);
    $form.find('[placeholder]').each(function() {
        var $input = $(this);
        if ($input.val() == $input.attr('placeholder')) {
            $input.val('');
        }
    });
});
$('[placeholder]').focusout();

这可以通过将focusin（焦点）和focusout（模糊）事件的处理委托给文档正文（或者如果你喜欢的话是更本地的容器），这是jQuery 1.7.1实现现已弃用的方法{{ 1}}，bind()和.live()。

看到它正常工作：http://jsfiddle.net/wg2eX/2/

动态添加的输入框不是动态绑定的

1 个答案: