IE9 HTML5占位符 – 人们如何实现这一目标?

我正在尝试在我的Web应用程序中使用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,'blur',_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之前重新使用 this gist.它的主要优点是简单易懂的代码

>删除内核和setup_placeholders部分.只需在匿名函数中立即调用它.
>测试前添加var.

对于支持占位符的浏览器,它只是回归到那里.它还处理现有表单中的新输入元素(请注意委托的使用).但是不处理动态的新表单元素.可以使用jQuery.on修改它.

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

注意,它需要使用两对parens,因为你正在调用一个匿名函数,然后调用返回函数(这可能会有不同的因素):

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

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码