精美而实用的网站,关注web编程技术、网站运营、SEO推广,让您轻松愉快的学习

placeholder是HTML5新属性,IE10以下的浏览器是不支持的,虽然IE10+支持placeholder属性,它的表现与其它浏览器也不一致。青岛星网下面跟大家分享:jQuery实现placeholder兼容所有浏览器的完美解决办法。

将以下脚本和样式引入你的页面(对于密码输入框,要设置ID属性值)

页面自行引入jquery哦切记。

<script type="text/javascript">
$(function () {
// 如果不支持placeholder,用jQuery来完成
if (!isSupportPlaceholder()) {
// 遍历所有input对象, 除了密码框
$('input').not("input[type='password']").each(
function () {
var self = $(this);
var val = self.attr("placeholder");
input(self, val);
}
);
/**//* 对password框的特殊处理
* 1.创建一个text框 
* 2.获取焦点和失去焦点的时候切换
*/
$('input[type="password"]').each(
function () {
var pwdField = $(this);
var pwdVal = pwdField.attr('placeholder');
var pwdId = pwdField.attr('id');
// 重命名该input的id为原id后跟1
pwdField.after('<input id="' + pwdId + '1" type="text" value=' + pwdVal + ' autocomplete="off" />');
var pwdPlaceholder = $('#' + pwdId + '1');
pwdPlaceholder.show();
pwdField.hide();
 
pwdPlaceholder.focus(function () {
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});
 
pwdField.blur(function () {
if (pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
}
);
}
});
 
// 判断浏览器是否支持placeholder属性
function isSupportPlaceholder() {
var input = document.createElement('input');
return 'placeholder' in input;
}
 
// jQuery替换placeholder的处理
function input(obj, val) {
var $input = obj;
var val = val;
$input.attr({ value: val });
$input.focus(function () {
if ($input.val() == val) {
$(this).attr({ value: "" });
}
}).blur(function () {
if ($input.val() == "") {
$(this).attr({ value: val });
}
});
}
</script>

placeholder样式设置

<style type="text/css">
/* 设置提示文字颜色 */
::-webkit-input-placeholder {
color: #838383;
}
 
:-moz-placeholder {
color: #838383;
}
 
.placeholder {
color: #ccc;
}
</style>
Tags:jQuery placeholder 浏览器