解决placeholder对ie9及以下的不兼容

时间:2022-01-14 18:57:14

具体的看代码,都写在注释里了,欢迎讨论

<script>
$(function () {
/*
*页面加载立刻执行
*@method:each遍历每个包含placeholder属性的对象(input)
* */
$('[placeholder]').each(function () {
//使每个input的value等于placeholder的值
$(this).val($(this).attr('placeholder'));
})
});
/*
* 焦点获取:点击时,使value的值为空
* */
$('[placeholder]').focus(function () {
//如果此时有值,且不等于placeholder,就不做任何操作,否则清空输入框
if($(this).val() == $(this).attr('placeholder')){
$(this).val('');
}
});
/*
* 焦点失去:没有输入时,value显示placeholder
* */
$('[placeholder]').blur(function() {
if ($(this).val() == '') {
$(this).val($(this).attr('placeholder'));
}
});
/*
* 没有输入的时候,此时value是placeholder,不能把它提交过去。要做另外的处理
* */
$('form').submit(function () {
//遍历所有对象,并为他们执行方法
$('[placeholder]').each(function () {
//如果没有输入,提交前使value为空
if($(this).val() == $(this).attr('placeholder')){
$(this).val('');
}
});
});
</script>