IE9 HTML5占位符 - 人们是如何实现这一点的？

Question

IE9 HTML5占位符 - 人们是如何实现这一点的？

6

我正在尝试在我的Web应用程序中使用“placeholder =“ xxx””属性，并且我不希望在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();
        });
    }
}
}

- Adam Levitt

1

可能是ie9中的占位符的重复问题。 - Elias Zamaria

3个回答

8

我之前写了一个jQuery插件，可在不支持placeholder的浏览器中添加其支持，对于已支持placeholder的浏览器则不做任何操作。 Placeholder Plugin

- corymathews

2

这是一个适用于密码字段的jQuery插件。它不像Matthew建议的代码那么小，但它有更多的修复。我已经成功地与H5Validate一起使用过这个插件。 http://webcloud.se/code/jQuery-Placeholder/

- powerbuoy

这个可以用，但是在密码字段上不起作用。有人有解决办法吗？ - Adam Levitt

嗯，它确实可以在密码字段上工作。您可以在此处查看从第10行开始的相关代码：https://github.com/danielstocks/jQuery-Placeholder/blob/master/jquery.placeholder.js - powerbuoy

这很奇怪，因为它实际上并没有在密码字段上表现出来。我确实查看了代码并看到了你指出的问题。嗯... - Adam Levitt

这非常奇怪。您能否使用DOM检查器查看发生了什么？（例如，占位符集，类型属性更改或插入虚拟文本字段等等？） - powerbuoy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matthew Flaschen · Accepted Answer

我们刚刚研究了同样的事情。我们决定重新使用此要点，由Aaron McCall编写，并进行了一些微小的更改。其主要优点是它是简单易懂的代码：

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

对于支持占位符的浏览器，它会直接回退到那里。它还处理现有表单中的新输入元素（请注意使用委托），但不处理动态新表单元素。可以使用jQuery.on对其进行修改。

如果您不喜欢这个解决方案，您可以使用其中一个这里的。然而，其中一些过于复杂，或者存在可疑的设计决策，比如使用setTimeout来检测新元素。

请注意，它需要使用两对圆括号，因为您正在调用一个匿名函数，然后调用返回的函数（这可以以不同的方式进行因式分解）。

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