在js(jquery)中获得文本框焦点和失去焦点的方法


Posted in Javascript onDecember 04, 2012

先来看javascript的直接写在了input上

<input name="pwuser" type="text" id="pwuser" class="input" value="楼盘账号" onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号') this.value='';" /> 
<input name="pwpwd" type="password" class="input1" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';">

jquery实现方法

对于元素的焦点事件,我们可以使用jQuery的焦点函数focus(),blur()。

focus():得到焦点时使用,和javascript中的onfocus使用方法相同。
如:

$("p").focus(); 或$("p").focus(fn)

blur():失去焦点时使用,和onblur一样。
如:
$("p").blur(); 或$("p").blur(fn)

实例
<form> 
<label for="searchKey" id="lbSearch">搜神马?</label> 这里label覆盖在文本框上,可以更好的控制样式 
<input id="searchKey" type="text" /> 
<input type="submit" value="搜索" /> 
</form>

jquery代码
$(function() { 
$('#searchKey').focus(function() { 
$('#lbSearch').text(''); 
}); 
$('#searchKey').blur(function() { 
var str = $(this).val(); 
str = $.trim(str); 
if(str == '') 
$('#lbSearch').text('搜神马?'); 
}); 
})

好了相当的不错吧
Javascript 相关文章推荐
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 #Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 #Javascript
js动画(animate)简单引擎代码示例
Dec 04 #Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 #Javascript
将光标定位于输入框最右侧实现代码
Dec 04 #Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 #Javascript
js 限制数字 js限制输入实现代码
Dec 04 #Javascript
You might like
php MySQL与分页效率
2008/06/04 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
python cookielib 登录人人网的实现代码
2012/12/19 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
Sony C++笔试题
2013/03/10 面试题
DTD的含义以及作用
2014/01/26 面试题
计算机专业毕业生的自我评价
2013/11/18 职场文书
领导干部考察材料
2014/02/08 职场文书
小学生期末评语
2014/04/21 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
青年文明号申报材料
2014/12/23 职场文书
党校个人总结
2015/03/04 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android