input 中的 placeholder 属性规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入值之前显示在输入字段中。注意:Internet Explorer 9 及之前的版本不支持 标签的 placeholder 属性。
输入框占位符效果,这是我经常在工作中需要兼容到IE7以上的专题页面遇到的问题,现在把它记录下来,方便大家作为参考吧~
/*设置输入框占位符效果*/
//获得焦点的时候,占位符为空,输入框的字体颜色为#000
function input_focus(inputName, inputValue) {
$(inputName).on('focus', function () {
var value_name = $(this).attr('value');
if (value_name == inputValue) {
$(this).attr('value', '');
}
$(this).css('color', '#000');
});
}
//失去焦点的时候,如果输入框为空,则显示占位符,占位符颜色为:#aaa
function input_blur(inputName, inputValue) {
$(inputName).on('blur', function () {
var value_name = $(this).attr('value');
if (value_name != '')
return;
} else {
$(this).css('color', '#aaa');
$(this).attr('value', inputValue);
}
});
}
//以下是调用方法,里面的内容可以具体的修改
input_focus('#class_name', '请填写您的姓名');
input_focus('#class_phone', '请填写您的联系方式');
input_focus('#class_code', '请填写您的短信验证码');
input_blur('#class_name', '请填写您的姓名');
input_blur('#class_phone', '请填写您的联系方式');
input_blur('#class_code', '请填写您的短信验证码');