分析:input表单输入框默认提示信息
2011-04-26 16:24
375 查看
相信上面两张图片上的输入框里有提示信息这功能大家都见过,有的人应该也自己动手做过。
我之前也做过,做法应该和大家都差不多,在输入框里写入提示内容,当鼠标获取焦点后清空内容,当失去焦点后判断内容是否为空,如果为空,则恢复显示提示内容,反则不显示。但这样的做法是否合理?下面一一来做下分析。
1、如果输入内容和提示内容完全一样,当失去焦点后,应该如何判断?
2、如果input在表单里,提交表单后,提示信息随着表单一并提交,难道还要在后端判断提交信息不等于提示信息,再进行数据操作么?
3、如果1、2两条都触发,后端要如果操作?
既然这种做法缺点这么多,那怎么做更好呢?其实方法很简单,把提示信息单独写在一个模块里,如div,然后设置这个div的样式,让它浮动到输入框上面,至于js,只需多写一句,当我点击这个div的时候,也触发input框的获取焦点事件即可。
这样做的好处就是,不仅解决了1、2两点的问题,而且提示内容不局限于文字了,你可以是图片,甚至是flash,大大增强了用户交互。
简单给段页面代码吧:
<input class="search" type="text" name="search"> <div id="searchtip" style="position:relative;color:#ccc"> <div style="position:absolute;top:-18px;left:4px">请输入信息</div> </div>
附1:这个功能我已经整合在我自己写的插件里,欢迎查看:jquery.HooRay——自己做的一个jquery常用工具插件
附2:了解HTML5的PLACEHOLDER属性,点击前往
相关文章推荐
- 分析:input表单输入框默认提示信息(较好的js样式)
- 控制input输入框中提示信息的显示和隐藏的方法
- input输入框为空时,添加默认提示jquery插件(转载)
- 控制input输入框中提示信息的显示和隐藏的方法
- 控制input输入框中提示信息的显示和隐藏的方法
- input表单的默认提示js方法(ie低版本不可编辑带光标bug)
- Javascript_06_表单验证(离开单项,输入框后提示信息)
- 控制input输入框中提示信息的显示和隐藏的方法
- input输入框鼠标焦点提示信息
- HTML表单密码框里的默认提示信息效果代码
- js表单提交验证-input下显示提示信息
- HTML 禁止显示input默认提示信息
- [Javascript]如何在HTML中实现点击input输入框(获得焦点)后默认提示消失的效果
- 控制input输入框中提示信息的显示和隐藏的方法
- 表单输入框添加提示信息
- jQuery Validate 表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中
- input 输入框的底层提示信息
- html的input输入框提示信息 点击隐藏
- 让input表单输入框不记录输入过信息的方法
- html的input输入框提示信息