Jquery实现文本框输入提示
浏览数：29 /
时间：2015年06月09日
一些用户体验好的表单都会在文本框里设置输入提示，文本框获取焦点时，提示内容消息，如果未输入，失去焦点时又会出现提示。
网上找到一个比较好用的控件jquery.inputDefault.js
使用方法：
1、在jsp页面引用jquery.inputDefault.js
<script src="/js/jquery.inputDefault.js" type="text/javascript"></script>
2、需要为控件增加一个自定义属性fs，fs的值就是提示内容。
<input type="text" id="key" name="key" fs="请输入"></input>
3、然后在jsp文件中增加js调用代码：
$(function() {
$(‘[fs]‘).inputDefault();
});
这个控件的实现实质上是在文本框上覆盖了一层<label>标签，通过文本框的onblur和onfocus事件来控制lable标签的显示与隐藏。
不过这个控件有一个弱点就是如果是动态表单，会造成标签错位，即提示内容与文本框错位。
于是自己也实现了一个input.emptyText.js
使用方法：
1、在jsp页面引用input.emptyText.js
<script type="text/javascript" src="/js/input.emptyText.js"></script>
2、需要为控件增加一个自定义属性emptyText，emptyText的值就是提示内容。
<input id="title" name="title" emptyText="请输入" />
3、然后在jsp文件中增加js调用代码：
$(‘[emptyText]‘).emptyText();
这种方法实际上是通过input控件的onfocus和onblur事件来控制控件的样式，onfocus事件触发时，判断控件的值是否是提示值，是则清空。onblur事件中，判断输入内容是否为空，为空则置控件的值为提示内容。
这种方法也有一个弱点，无法输入与提示内容相同的值，且提交时要自己写代码去掉控件的提示内容。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
