基于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 操作cookies及正确使用cookies的属性
Oct 15 Javascript
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 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
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
python正则表达式re模块详细介绍
2014/05/29 Python
python获取android设备的GPS信息脚本分享
2015/03/06 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
python dict乱码如何解决
2020/06/07 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
《王二小》教学反思
2014/02/27 职场文书
求职信格式要求
2014/05/23 职场文书
五一促销活动总结
2014/07/01 职场文书
招商引资工作汇报
2014/10/28 职场文书
出国签证在职证明范本
2014/11/24 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
opencv读取视频并保存图像的方法
2021/06/04 Python
Python函数对象与闭包函数
2022/04/13 Python