基于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实现的仿Flash广告图片轮换效果
Apr 24 Javascript
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
jsTree使用记录实例
Dec 01 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
小程序如何构建骨架屏
May 29 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
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
深入php处理整数函数的详解
2013/06/09 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
奇妙的js
2007/09/24 Javascript
JSON格式化输出
2014/11/10 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
python的迭代器与生成器实例详解
2014/07/16 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
Python的互斥锁与信号量详解
2019/09/12 Python
python numpy存取文件的方式
2020/04/01 Python
python配置文件写入过程详解
2019/10/19 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
简约控的天堂:The Undone
2016/12/21 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
大学本科生的个人自我评价
2013/12/09 职场文书
政风行风整改报告
2014/11/06 职场文书
大学生学年个人总结
2015/02/15 职场文书
学校节水倡议书
2015/04/29 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
开网店计划分析
2019/07/30 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
Golang 字符串的常见操作
2022/04/19 Golang