input 输入框获得/失去焦点时隐藏/显示文字(jquery版)


Posted in Javascript onApril 02, 2013

input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图
输入框默认状态:
input 输入框获得/失去焦点时隐藏/显示文字(jquery版) 
输入框获取焦点状态:
input 输入框获得/失去焦点时隐藏/显示文字(jquery版) 
大家可以看效果图的搜索输入框,默认显示着“用户名/Email”的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示“用户名/Email”的提示。是不是很常见?很多搜索、登录、表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的:

<input type="text" value="搜索关键字" onfocus="if(this.value == '搜索关键字') this.value = ''" onblur="if(this.value =='') this.value = '搜索关键字'" />

我是非常反对把 javascript 写在 html 标签里的,这和 style 写在 html 标签里一样,虽然不违反 W3C 标准,但也不推荐这么写。因为:
1.完全没有复用性可言,如果是个表单,输入框很多,每个都需要这样的效果,那就每个都这么处理吗?
2.如果要修改其中的提示文字,费时费力又不好维护。
3.我们倡导结构(html)、表现(css)、行为(javascript)三者分离,这才是一个好的页面。
那要怎么写才能实现这个效果,而且既有复用性,又好维护,又不需要把 js 写进 html 里呢?
具体方法如下:
首先肯定是引入jQuery
Html代码:
<div><input type="text" value="提示测试" class="input_test" /></div> 
<div><input type="text" value="请输入搜索关键" class="input_test" /></div>

jQuery代码:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('.input_test').bind({ 
focus:function(){ 
if (this.value == this.defaultValue){ 
this.value=""; 
} 
}, 
blur:function(){ 
if (this.value == ""){ 
this.value = this.defaultValue; 
} 
} 
}); 
}) 
</script>

只要在实现的input输入框加上”input_test”这个class就可以轻松实现了
查看:Demo
Javascript 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 #Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 #Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 #Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 #Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 #Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 #Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 #Javascript
You might like
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
orm获取关联表里的属性值
2016/04/17 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
php实现每日签到功能
2018/11/29 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
多广告投放代码 推荐
2006/11/13 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
搭建vue开发环境
2018/07/19 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
python局部赋值的规则
2013/03/07 Python
Python实现比较两个列表(list)范围
2015/06/12 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
python监控文件并且发送告警邮件
2018/06/21 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
django中cookiecutter的使用教程
2020/12/03 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
教师党性分析材料
2014/02/04 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
小班上学期个人总结
2015/02/12 职场文书
计划生育责任书
2015/05/09 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
python中数组和列表的简单实例
2022/03/25 Python