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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
javascript求日期差的方法
Mar 02 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
angular2+node.js express打包部署的实战
Jul 27 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 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
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
ThinkPHP安装和设置
2015/07/27 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
浅谈javascript的调试
2015/01/28 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
Python 函数返回值的示例代码
2019/03/11 Python
Python的log日志功能及设置方法
2019/07/11 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
python安装sklearn模块的方法详解
2020/11/28 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
咖啡书吧创业计划书
2014/01/13 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
个人租房协议书
2014/04/09 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技