【前言】
在实践过程中发现jquery.placeholder.js对placeholder支持的效果不是特别理想，placeholder属性值时而会消失，所以建议采用原生JS方案。
【代码】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo测试</title>
<style type="text/css">
*{margin: 0;padding: 0}
</style>
</head>
<body>
<input type="text" name="username" placeholder="请输入名字">
<script type="text/javascript">
placeholder();
function placeholder() {
var doc=document,
inputs=doc.getElementsByTagName('input'),
//浏览器input域是否支持placeholder
supportPlaceholder='placeholder'in doc.createElement('input'),
placeholder=function(input){
var text=input.getAttribute('placeholder'),
defaultValue=input.defaultValue;
if(defaultValue==''){
input.value=text
}
input.onfocus=function(){
if(input.value===text){
this.value=''
}
};
input.onblur=function(){
if(input.value===''){
this.value=text
}
}
};
if(!supportPlaceholder){
for(var i=0,len=inputs.length;i<len;i++){
var input=inputs[i],
text=input.getAttribute('placeholder');
if(input.type==='text'&&text){
placeholder(input)
}
}
}
}
</script>
</body>
</html>
相关推荐
总结起来，解决IE浏览器不支持`placeholder`属性的问题主要依赖于JavaScript，通过监听输入框的焦点和失去焦点事件来模拟`placeholder`的效果。同时，可以结合Bootstrap的样式来优化视觉体验。无论选择哪种方法，都...
"IE8支持的placeholder组件"就是一个为了解决IE8及其以下版本浏览器不支持HTML5 `placeholder`属性而设计的解决方案。这个组件基于jQuery库，能够为这些旧版Internet Explorer提供类似HTML5 `placeholder`的效果，...
jquery插件解决IE6到IE9版本不支持placeholder的问题，支持同一个网页包含多个password input的版本。用法：下载插件并引用，将插件代码里面的login-input改成自己的密码input输入框的样式即可。
placeHolder是html5加入的新属性，此代码基于jQuery实现placeholder属性功能。
描述中提到的“完美兼容H5 placeholder属性在IE9及以下版本的问题”，意味着这个解决方案能够有效地在不支持`placeholder`属性的IE浏览器上模拟出相同的效果。"自测可用，修改点少"表示这个解决方案经过了实际测试，...
// 如果浏览器不支持placeholder属性，jQuery.placeholder插件会自动处理 }); ``` 在这个例子中，CSS代码定义了`placeholder`文本的默认样式，使其在未聚焦时呈现灰色。当文档加载完成并执行jQuery代码后，`...
总的来说，"placeholderfriend.js"插件为开发者提供了一种便捷的方式来解决IE浏览器对`placeholder`属性的支持问题，使得在旧版IE中也能享受到与现代浏览器相似的用户体验。通过理解其工作原理和使用方法，我们可以...
// 检查浏览器是否支持placeholder属性 if (!('placeholder' in document.createElement('input'))) { // 不支持时，遍历所有具有placeholder属性的input元素 $('input[placeholder]').each(function(){ var ...
这个解决方案的优点在于它既简单又有效，能够很好地在 IE8 和 IE9 上模拟 `placeholder` 属性。不过，需要注意的是，对于大量的输入框，这样的处理可能会增加页面的 JavaScript 代码量，因此在实际应用中，可能需要...
简洁的placeholder插件，支持ie9、ie8及以下版本。完美解决ie9中onpropertychange问题。使用简单，引入placeholder.js即可让您的ie完美支持placeholder
这段代码检查浏览器是否原生支持`placeholder`，如果不支持，则在页面加载完成后手动添加该功能。 此外，还可以利用CSS来调整样式，确保在IE6、7、8中提示文本的外观与现代浏览器一致。例如： ```css /* 遮盖默认...
标题中的“placeholder效果的jQuery插件，支持IE6、IE7”指的是一个专门用于处理HTML5 placeholder属性的jQuery扩展，这个插件使得在不支持HTML5的旧版Internet Explorer（如IE6和IE7）中也能实现类似的功能。...
在早期的网页开发中，IE8（Internet Explorer 8）是一个常见的挑战，因为它的浏览器内核不支持一些现代Web标准，比如HTML5中的`placeholder`属性。`placeholder`属性是用于输入框`<input>`的一个非常实用的功能，它...
如果浏览器不支持placeholder，那么对于每一个具有placeholder属性的input元素，绑定focus和blur事件处理函数。这些函数会在input元素获得和失去焦点时，根据其值与placeholder值的关系进行相应的值更新和CSS类的...
这个插件是由智学无忧的老曹亲自编写的，目的是解决IE浏览器对`placeholder`属性的不支持问题。通过巧妙地运用代码封装和闭门技术，该插件能够使`placeholder`属性在所有版本的IE浏览器中正常工作，提升了用户体验，...
但是在不支持html5的低版本的浏览器中，placeholder属性是无效的，为了解决这个问题，因此，人为的去实现placeholder属性： 复制代码代码如下: //placeholder功能实现 var placeholder = { add: function (el) { if...
简洁的placeholder插件，支持ie9、ie8及以下版本。完美解决ie9中onpropertychange问题。使用简单，引入placeholder.js即可让您的ie完美支持placeholder
为了解决这个问题，我们可以采用一些JavaScript库或者自定义JavaScript代码来模拟`placeholder`的效果，确保在不支持该属性的浏览器中也能实现类似的功能。在这个场景中，我们有两个文件：`placehoder.html` 和 `...