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 相关文章推荐
javascript 获取表单file全路径
Dec 31 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
vue权限问题的完美解决方案
May 08 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 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中常用数组处理方法实例分析
2008/08/30 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
PHP使用递归生成文章树
2015/04/21 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
农村婚礼证婚词
2014/01/10 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
公司财务部岗位职责
2015/04/14 职场文书
2015年幼师工作总结
2015/04/28 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python