基于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 相关文章推荐
a标签click和href执行顺序探讨
Jun 23 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
javascript中this关键字详解
Dec 12 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
详解如何探测小程序返回到webview页面
May 14 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
javascript实现数字时钟效果
Feb 06 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
第十一节 重载 [11]
2006/10/09 PHP
打造计数器DIY三步曲(下)
2006/10/09 PHP
我的论坛源代码(九)
2006/10/09 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
Python如何发布程序的详细教程
2018/10/09 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
护士演讲稿优秀范文
2014/04/30 职场文书
舞蹈专业求职信
2014/06/13 职场文书
出纳试用期自我评价
2015/03/10 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python