Jquery实现文本框输入提示
一些用户体验好的表单都会在文本框里设置输入提示,文本框获取焦点时,提示内容消息,如果未输入,失去焦点时又会出现提示。
网上找到一个比较好用的控件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事件中,判断输入内容是否为空,为空则置控件的值为提示内容。
这种方法也有一个弱点,无法输入与提示内容相同的值,且提交时要自己写代码去掉控件的提示内容。
Jquery实现文本框输入提示的更多相关文章
- 分享一个仅0.7KB的jQuery文本框输入提示插件
由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...
- 转摘:ashx+jquery-autocomplete文本框输入提示功能Asp.net
引入所需文件 <script type="text/javascript" src="JS/jquery-1.8.2.min.js"></sc ...
- Jquery 限制文本框输入字数【转】
<script type="text/javascript" src="js/jquery.min.js" ></script> < ...
- 使用jquery实现文本框输入特效:文字逐个显示逐个消失反复循环
前两天看到某个网站上的输入框有个小特效:文字逐个显示,并且到字符串最大长度后,逐个消失,然后重新循环显示消失,循环显示字符串数组.我对这个小特效有点好奇,于是今天自己尝试用jquery写一个简单的小d ...
- jquery判断文本框输入的是非数字内容(交流QQ群:452892873)
isNaN($(this).val())==false 输入的是数字, isNaN($(this).val())==true 输入的是非数字内容
- jQuery限制文本框的输入长度
jQuery限制文本框输入,包含粘贴. //限制文本框的输入长度 $(function () { $(document).on("keypress", ".txt-val ...
- 用Jquery控制文本框只能输入数字和字母
用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...
- jQuery打造用户注册时获取焦点文本框出现提示jquery表单特效
jQuery打造用户注册时获取焦点文本框出现提示效果的jquery表单特效 当获取焦点时,会分别的弹出相应的信息提示框,失去焦点就会隐藏提示信息. 效果兼容性很高,适用浏览器:IE6.IE7.IE8. ...
- JQuery 限制文本框只能输入数字和小数点
$(function(){ /*JQuery 限制文本框只能输入数字*/ $(".NumText").keyup(function(){ $(this).val($(this).v ...
随机推荐
- 【poj3691-DNA repair】AC自动机+DP
题意:给n个病毒DNA序列,再给一个DNA序列,问该序列至少修改多少个碱基能不含任何病毒DNA.病毒DNA序列一共不超过1000,询问的DNA长度不超过1000. 题解:DP:d[l][p]表示询问到 ...
- 两个奇葩的C/C++问题
今天为大家介绍几个奇葩的C/C++问题. 1 大家看看下面的输出结果是什么呢? #include <stdio.h> #include <stdlib.h> void ma ...
- for (Map.Entry<Long, Integer> me : zlSendMap.entrySet())
public static void main(String[] args) throws IOException { Map<String,String> map = new HashM ...
- swift:入门知识之简单值
1.swift中用let关键字类定义常量,用var关键字来定义变量. 2.swift语句的结尾不需要再带逗号,系统在运行程序时自动会帮你添加上 3.一个变量或常量必须与赋值时拥有相同的类型. 4.如果 ...
- 关于请求添加HttpRequestHeader
WebClient w = new WebClient(); w.Headers.Add(HttpRequestHeader.Accept, "application/json") ...
- xcode解决问题dyld: Library not loaded
一.问题 编译通过,联机调试时,应用启动闪退,XCODE的Output出现提示: dyld: Library not loaded: /System/Library/Frameworks/AdSupp ...
- phpcms上线步骤,无法生成缓存,页面空白原因
缓存目录没有设置成777. 1.修改数据库配置 2.修改数据表中的本地地址成线上地址 3.修改代码中的配置,本地地址批量改为线上地址 4.登录后台,更新缓存
- R语言将List转为矩阵do.call
ehparse.matrix <- do.call(rbind, easyham.parse)
- MVC 中使用扩展方法
扩展方法(Extension Method)是给那些不是你拥有.因而不能直接修改的类添加方法的一种方便的办法. 一.使用扩展方法 1.定义一个购物车的类-ShoppingCart using Sys ...
- Swift 2.0 : 'enumerate' is unavailable: call the 'enumerate()' method on the sequence
Swift 2.0 : 'enumerate' is unavailable: call the 'enumerate()' method on the sequence 如下代码: for (ind ...