对于placeholder浏览器兼容性（包括密码输入框）解决办法

系统管理员 2022-04-24 04:40 190阅读 0赞

# [对于placeholder浏览器兼容性（包括密码输入框）解决办法][placeholder] #

将以下脚本和样式引入你的页面（对于密码输入框，要设置ID属性值）：

$(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>

:-moz-placeholder \{  
color: \#838383;  
\}

.placeholder \{  
color: \#ccc;  
\}  
</style>

posted @ 2016-08-18 16:06 [波霸38][38] 阅读( ...) 评论( ...) [编辑][Link 1] 收藏

[placeholder]: https://www.cnblogs.com/sharing1986687846/p/5784270.html
[38]: https://www.cnblogs.com/sharing1986687846/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=5784270