在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 相关文章推荐
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
vue实现短信验证码输入框
Apr 17 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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
php中动态调用函数的方法
2015/03/16 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
js 上传图片预览问题
2010/12/06 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
python实现桌面壁纸切换功能
2019/01/21 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
小学安全工作汇报材料
2014/08/19 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
同事打架检讨书
2015/05/06 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
教师节主题班会方案
2015/08/17 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis