我正在尝试在我的 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, :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的这个要点。 主要优点是代码简单易懂:
-
卸下内核和setup_placeholders部件。 只需在匿名函数中立即调用它即可。
-
在
test
之前添加var
。
对于支持 placeholder
的浏览器,它只是回退到那个。 它还处理现有表单中的新输入元素(注意delegate
的使用)。 但不处理动态新表单元素。 它可能可以通过jQuery.on
进行修改以做到这一点。
如果你不喜欢这个,你可以在这里使用其中一个。 但是,其中一些过于复杂,或者具有可疑的设计决策,例如用于检测新元素的setTimeout
。
请注意,它需要使用两对参数,因为您正在调用匿名函数,然后调用返回的函数(这可以以不同的方式分解):
(function () {
// ...
})()();
不久前我写了一个jquery插件,它将占位符支持添加到任何不支持它的浏览器中,并且在那些不支持它的浏览器中什么也不做。
占位符插件
这是一个jQuery插件,也适用于密码字段。它不像 Matthew 建议的代码那么小,但它还有一些修复程序。我也成功地将其与H5Validify一起使用。
http://webcloud.se/code/jQuery-Placeholder/