在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动画效果代码3
Apr 03 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
JS中Location使用详解
May 12 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 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数组操作类实例
2015/07/11 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
在django模板中实现超链接配置
2019/08/21 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
公司领导推荐信
2013/11/12 职场文书
syb养殖创业计划书
2014/01/09 职场文书
三个儿子教学反思
2014/02/03 职场文书
班主任对学生的评语
2014/04/26 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
保护环境标语
2014/06/09 职场文书
Consul在linux环境的集群部署
2022/04/08 Servers
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang