<style type="text/css">
/* 设置提示文字颜色 */
::-webkit-input-placeholder {
color: #838383;
}
:-moz-placeholder {
color: #838383;
}
.placeholder {
color: #ccc;
}
</style>
登录用户名、密码文字提示，鼠标离开显示文字 html5 and jquery
账号：<input type="text" name="email" placeholder = '用户账号' />
密码：<input type="password" name="password" placeholder = '密码' autocomplete="off" />
<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 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>