6

我正在尝试placeholder="xxx"在我的 Web 应用程序中使用该属性，并且我不想为 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();
        });
    }
}
}
4

3 回答 3

12

我们只是研究了同样的事情。在做了一些小改动后，我们决定重用Aaron McCall的这个要点。主要优点是代码简单易懂：

  1. 删除内核和 setup_placeholders 部分。只需立即在匿名函数中调用它。

  2. var之前添加test。

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

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

请注意，它需要使用两对括号，因为您调用的是匿名函数，然后调用返回的函数（这可能会以不同的方式分解）：

(function () {
  // ...
})()();
于 2012-07-03T02:39:26.577 回答
8

不久前我写了一个 jquery 插件，它将占位符支持添加到任何不支持它的浏览器，并且在那些支持它的浏览器中什么也不做。

占位符插件

于 2013-01-22T15:16:45.790 回答
2

这是一个也适用于密码字段的 jQuery 插件。它不像 Matthew 建议的代码那么小，但它有更多的修复。我也成功地将它与 H5Validate 一起使用。

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

于 2012-07-03T03:26:58.340 回答