在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 相关文章推荐
JavaScript 继承详解(一)
Jul 13 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
基于vue和bootstrap实现简单留言板功能
May 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
pymysql的简单封装代码实例
2020/01/08 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
成功的酒店创业计划书
2013/12/27 职场文书
军训心得体会
2013/12/31 职场文书
仓库组长岗位职责
2014/01/29 职场文书
建筑管理专业求职信
2014/07/28 职场文书
党支部承诺书
2015/01/20 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫