Question

我正在尝试在我的网络应用程序中使用placeholder="xxx"属性，我不想为IE9提供特殊的视觉效果。人们可以在IE9中为实现这一功能提出一些好的建议吗？

我在这里找到了几个链接，但没有一个建议的脚本足够......答案是从2011年中期开始的，所以我想也许有更好的解决方案。也许有广泛采用的jQuery插件？我不想使用任何需要侵入式代码的东西，例如需要某个css类或其他东西。

感谢。

编辑 - 我还需要它来处理密码输入字段。

// the below snippet should work, but isn't.
$(document).ready(function() {
   initPlaceholders()();
}

function initPlaceholders() {
        $.support.placeholder = false;
var test = document.createElement('input');
if ('placeholder' in test) {
    $.support.placeholder = true;
    return function() { }
} else {
    return function() {
        $(function() {
            var active = document.activeElement;
            $('form').delegate(':text, :password', 'focus', function() {
                var _placeholder = $(this).attr('placeholder'),
                    _val = $(this).val();
                if (_placeholder != '' && _val == _placeholder) {
                    $(this).val('').removeClass('hasPlaceholder');
                }
            }).delegate(':text, :password', 'blur', function() {
                var _placeholder = $(this).attr('placeholder'),
                    _val = $(this).val();
                if (_placeholder != '' && (_val == '' || _val == _placeholder)) {
                    $(this).val(_placeholder).addClass('hasPlaceholder');
                }
            }).submit(function() {
                $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
            });
            $(':text, :password').blur();
            $(active).focus();
        });
    }
}
}

Answer 1

我们刚研究了同样的事情。我们决定在进行一些细微更改后重新使用this gist Aaron McCall。它的主要优点是代码简单易懂：

删除内核和setup_placeholders部分。只需在匿名函数中立即调用它。
在var之前添加test。

对于支持placeholder的浏览器，它只是回归到那个。它还处理现有表单中的新输入元素（请注意delegate的使用）。但是不处理动态的新表单元素。可以使用jQuery.on修改它。

如果您不喜欢这个，可以使用其中一个here。但是，其中一些过于复杂，或者有一些可疑的设计决策，如setTimeout，用于检测新元素。

请注意，它需要使用两对parens，因为你正在调用一个匿名函数，然后调用返回的函数（这可能会有不同的因素）：

(function () {
  // ...
})()();

Answer 2

我前段时间写了一个jquery插件，它将占位符支持添加到任何不支持它的浏览器中，并且在那些不支持它的浏览器中做任何事情。

Placeholder Plugin

Answer 3

这是一个与密码字段一起使用的jQuery插件。它没有马修建议的那么小，但它还有一些修复。我也和H5Validate一起成功地使用了它。

http://webcloud.se/code/jQuery-Placeholder/

IE9 HTML5占位符 - 人们如何实现这一目标？

3 个答案: