placeholder和json两种实现登录隐藏的方法
浏览数：19 /
时间：2015年06月09日
<head>
<title>
placeholder和json两种实现登录隐藏的方法
</title>
<script type="text/javascript">
//判断浏览器是否支持 placeholder属性
function isPlaceholder() {
var input = document.createElement('input');
return 'placeholder' in input;
}
if (!isPlaceholder()) { //不支持placeholder 用jquery来完成
$(document).ready(function() {
if (!isPlaceholder()) {
$("input").not("input[type='password']").each( //把input绑定事件 排除password框
function() {
if ($(this).val() == "" && $(this).attr("placeholder") != "") {
$(this).val($(this).attr("placeholder"));
$(this).focus(function() {
if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
});
$(this).blur(function() {
if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
});
}
});
//对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
var pwdField = $("input[type=password]");
var pwdVal = pwdField.attr('placeholder');
pwdField.after('<input class="password" id="pwdPlaceholder" type="text" value=' + pwdVal + ' autocomplete="off" />');
var pwdPlaceholder = $('#pwdPlaceholder');
pwdPlaceholder.show();
pwdField.hide();
pwdPlaceholder.focus(function() {
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});
pwdField.blur(function() {
if (pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
}
});
}
</script>
</head>
<body>
<input class="username" placeholder="用户名" type="text" id="accountId" name="operId"
maxlength="20" style="ime-mode:disabled;" />
</br>
<input class="password" placeholder="密码" type="password" id="pwdId" name="pwd"
maxlength="20" style="ime-mode:disabled;" />
</body>
placeholder和json两种实现登录隐藏的方法,当浏览器不支持placeholder时，可以用json来实现登录用户名密码的隐藏
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
