有时候,在填写表单时,需要在input框里进行简单的提示,例如:哪里填写用户名,哪里填写密码等;
简单的实现方法,可以在页面加载的时候,先设置input的value属性为提示内容,例如:
<input type="text" name="author" id="author" value="Name"/>
<input type="text" name="email" id="email" value="Email"/>
<input type="text" name="email" id="email" value="Email"/>
然后,利用onfocus和onblur事件逐个对input元素进行判断,这里以#author为例:
$('#author').bind('focus',function(){
this.value = this.value=='Name' ? '' : this.value //如果input的值为提示内容,设置为空,否则不变
}).bind('blur',function(){
this.value = this.value=='' ? 'Name' :this.value //如果input的值为空,设置为提示内容,否则不变
})
this.value = this.value=='Name' ? '' : this.value //如果input的值为提示内容,设置为空,否则不变
}).bind('blur',function(){
this.value = this.value=='' ? 'Name' :this.value //如果input的值为空,设置为提示内容,否则不变
})
缺点:
1、这样填写的表单,提交的时候需要在后台再判断一次输入值是否为提示信息
2、不能输入跟提示信息一样的值,因为在onfocus事件或后台判断中会被设置为空
3、需要对每个input进行逐个判断
————————————————改进方法——————————————————
原理:将input和提示信息分离
步骤:
1、将提示信息放到一个label里面;
2、将这个label和input放到同一个li中;
3、设置li的position:relative;z-index:10;同时设置label的:positon:absolute;z-index:5;设置适当的left、top值,使得提示信息的label在input下方
4、利用javascript跟进input的value值,判断提示信息的显示方式
效果:(IE需要刷新)