博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

表单input里的填写提示

Posted on 2010-04-14 22:44  peswe  阅读(3277)  评论(0编辑  收藏  举报

有时候,在填写表单时,需要在input框里进行简单的提示,例如:哪里填写用户名,哪里填写密码等;

简单的实现方法,可以在页面加载的时候,先设置input的value属性为提示内容,例如:

<input type="text" name="author" id="author" value="Name"/>
<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的值为空,设置为提示内容,否则不变
})

缺点:

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需要刷新)