基于jQuery的输入框无值自动显示指定数据的实现代码


Posted in Javascript onJanuary 24, 2011

【解决方案】

1. 准备工作

(1)输入框

<input type="text" name="searchText" title="请输入搜索关键字" />

(2)CSS代码

input.helpText { color: #aaa;}

(3)转换方法
function switchText() 
{ 
if ($(this).val() == $(this).attr('title')) 
$(this).val('').removeClass('helpText'); 
else if ($.trim($(this).val()) == '') 
$(this).addClass('helpText').val($(this).attr('title')); 
}

(4)具体实现
$('input[type=text][title!=""]').each(function() { 
if ($.trim($(this).val()) == '') $(this).val($(this).attr('title')); 
if ($(this).val() == $(this).attr('title')) $(this).addClass('helpText'); 
}).focus(switchText).blur(switchText); $('form').submit(function() { 
$(this).find('input[type=text][title!=""]').each(function() { 
if ($(this).val() == $(this).attr('title')) $(this).val(''); 
}); 
});

2. 参考文章
http://webservices.blog.gustavus.edu/2008/06/23/text-input-example-text-with-jquery/
Javascript 相关文章推荐
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
JQuery 学习笔记 选择器之五
Jul 23 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
jQuery实现滚动效果
Nov 17 jQuery
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
JS实现拼图游戏
Jan 29 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 #Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 #Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 #Javascript
无阻塞加载脚本分析[全]
Jan 20 #Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 #Javascript
jqeury eval将字符串转换json的方法
Jan 20 #Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 #Javascript
You might like
短波收音机简介
2021/03/01 无线电
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
jQuery使用手册之一
2007/03/24 Javascript
ArrayList类(增强版)
2007/04/04 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Python操作json数据的一个简单例子
2014/04/17 Python
python3去掉string中的标点符号方法
2019/01/22 Python
python 字符串常用函数详解
2019/09/11 Python
如何对python的字典进行排序
2020/06/19 Python
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
知识就是力量演讲稿
2014/09/13 职场文书
2015年司机工作总结
2015/04/23 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
Java设计模式之代理模式
2022/04/22 Java/Android