在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 相关文章推荐
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
javascript实现日期按月份加减
May 15 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
浅谈React Event实现原理
Sep 20 Javascript
JS实现音乐钢琴特效
Jan 06 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读取文件并可支持远程文件的代码分享
2012/10/03 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Python中如何添加自定义模块
2020/06/09 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
面料业务员岗位职责
2013/12/26 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
2014年评职称工作总结
2014/11/20 职场文书
终止合同协议书范本
2016/03/22 职场文书