在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 innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
js中生成map对象的方法
Jan 09 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 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 远程关机操作的代码
2008/12/05 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
vue-loader教程介绍
2017/06/14 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
详解C++编程中一元运算符的重载
2016/01/19 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
2014年国培研修感言
2014/03/09 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
初三毕业评语
2014/12/26 职场文书
给下属加薪申请报告
2015/05/15 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫