一些用户体验好的表单都会在文本框里设置输入提示,文本框获取焦点时,提示内容消息,如果未输入,失去焦点时又会出现提示。

网上找到一个比较好用的控件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实现文本框输入提示的更多相关文章

  1. 分享一个仅0.7KB的jQuery文本框输入提示插件

    由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...

  2. 转摘:ashx+jquery-autocomplete文本框输入提示功能Asp.net

    引入所需文件 <script type="text/javascript" src="JS/jquery-1.8.2.min.js"></sc ...

  3. Jquery 限制文本框输入字数【转】

    <script type="text/javascript" src="js/jquery.min.js" ></script> < ...

  4. 使用jquery实现文本框输入特效:文字逐个显示逐个消失反复循环

    前两天看到某个网站上的输入框有个小特效:文字逐个显示,并且到字符串最大长度后,逐个消失,然后重新循环显示消失,循环显示字符串数组.我对这个小特效有点好奇,于是今天自己尝试用jquery写一个简单的小d ...

  5. jquery判断文本框输入的是非数字内容(交流QQ群:452892873)

    isNaN($(this).val())==false   输入的是数字, isNaN($(this).val())==true  输入的是非数字内容

  6. jQuery限制文本框的输入长度

    jQuery限制文本框输入,包含粘贴. //限制文本框的输入长度 $(function () { $(document).on("keypress", ".txt-val ...

  7. 用Jquery控制文本框只能输入数字和字母

    用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...

  8. jQuery打造用户注册时获取焦点文本框出现提示jquery表单特效

    jQuery打造用户注册时获取焦点文本框出现提示效果的jquery表单特效 当获取焦点时,会分别的弹出相应的信息提示框,失去焦点就会隐藏提示信息. 效果兼容性很高,适用浏览器:IE6.IE7.IE8. ...

  9. JQuery 限制文本框只能输入数字和小数点

    $(function(){ /*JQuery 限制文本框只能输入数字*/ $(".NumText").keyup(function(){ $(this).val($(this).v ...

随机推荐

  1. 【poj3691-DNA repair】AC自动机+DP

    题意:给n个病毒DNA序列,再给一个DNA序列,问该序列至少修改多少个碱基能不含任何病毒DNA.病毒DNA序列一共不超过1000,询问的DNA长度不超过1000. 题解:DP:d[l][p]表示询问到 ...

  2. 两个奇葩的C/C++问题

    今天为大家介绍几个奇葩的C/C++问题. 1 大家看看下面的输出结果是什么呢? #include <stdio.h> #include <stdlib.h>   void ma ...

  3. for (Map.Entry<Long, Integer> me : zlSendMap.entrySet())

    public static void main(String[] args) throws IOException { Map<String,String> map = new HashM ...

  4. swift:入门知识之简单值

    1.swift中用let关键字类定义常量,用var关键字来定义变量. 2.swift语句的结尾不需要再带逗号,系统在运行程序时自动会帮你添加上 3.一个变量或常量必须与赋值时拥有相同的类型. 4.如果 ...

  5. 关于请求添加HttpRequestHeader

    WebClient w = new WebClient(); w.Headers.Add(HttpRequestHeader.Accept, "application/json") ...

  6. xcode解决问题dyld: Library not loaded

    一.问题 编译通过,联机调试时,应用启动闪退,XCODE的Output出现提示: dyld: Library not loaded: /System/Library/Frameworks/AdSupp ...

  7. phpcms上线步骤,无法生成缓存,页面空白原因

    缓存目录没有设置成777. 1.修改数据库配置 2.修改数据表中的本地地址成线上地址 3.修改代码中的配置,本地地址批量改为线上地址 4.登录后台,更新缓存

  8. R语言将List转为矩阵do.call

    ehparse.matrix <- do.call(rbind, easyham.parse)

  9. MVC 中使用扩展方法

     扩展方法(Extension Method)是给那些不是你拥有.因而不能直接修改的类添加方法的一种方便的办法. 一.使用扩展方法 1.定义一个购物车的类-ShoppingCart using Sys ...

  10. 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 ...