在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 相关文章推荐
用jQuery简化JavaScript开发分析
Feb 19 Javascript
9个JavaScript评级/投票插件
Jan 18 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 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
smarty的保留变量问题
2008/10/23 PHP
PHP使用数组实现队列
2012/02/05 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
php中apc缓存使用示例
2013/12/25 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
Python如何对齐字符串
2020/07/30 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
自荐书模板
2013/12/19 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
致运动员赞词
2015/07/22 职场文书
Python+Tkinter打造签名设计工具
2022/04/01 Python
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL