IE9 HTML5占位符 - 人们如何实现这一目标？ [英] IE9 HTML5 placeholder - how are people achieving this?

问题描述

我正在尝试在我的网络应用程序中使用占位符=xxx属性，我不希望IE9具有特殊的视觉效果。人们可以在IE9中提出一些很好的建议来实现这个功能吗？

I'm trying to use the placeholder="xxx" attribute in my web application, and I don't want to have a special visual for IE9. Can people throw out some good suggestions for achieving this functionality in IE9?

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

I've found a couple links on here but none of the suggested scripts were sufficient... and the answers were from mid-2011, so I figured maybe there is a better solution out there. Perhaps with a widely-adopted jQuery plugin? I do not want to use anything that requires intrusive code such as requiring a certain css class or something.

谢谢。

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

EDIT - I also need this to work for password input fields.

// 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();
        });
    }
}
}

推荐答案

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

We just researched the same thing. We decided on reusing this gist, by Aaron McCall, after making some minor changes. The main advantage is that it's simple, easy to understand code:

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

1. Remove the kernel and setup_placeholders parts. Just call it immediately in an anonymous function.

在测试之前添加 var 。

对于支持占位符的浏览器，它简直就是回归。它还处理现有表单中的新输入元素（请注意 delegate 的使用）。但是不处理动态的新表单元素。它可能会被修改为 jQuery.on 。

For browsers that support placeholder, it simply falls back to that. It also handles new input elements (note the use of delegate) in existing forms. But does not handle dynamic new form elements. It could probably be modified to do so with jQuery.on.

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

If you don't like this one, you can use one of the ones here. However, some of them are overcomplicated, or have questionable design decisions like setTimeout for detecting new elements.

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

Note that it needs to use two pairs of parens, since you're calling an anonymous function, then calling the returned function (this could be factored out differently):

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

这篇关于IE9 HTML5占位符 - 人们如何实现这一目标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！