在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让Html中特殊字符不被转义
Nov 05 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
Vue 打包体积优化方案小结
May 20 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
PHP生成树的方法
2015/07/28 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
js日期联动示例
2014/05/02 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
在Django的View中使用asyncio的方法
2019/07/12 Python
pytorch的batch normalize使用详解
2020/01/15 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
python自定义函数def的应用详解
2020/06/03 Python
容易被忽略的Python内置类型
2020/09/03 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
军训自我鉴定
2013/12/14 职场文书
投资意向书
2014/07/30 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
怎么写工作检讨书
2014/11/16 职场文书
少先队工作总结2015
2015/05/13 职场文书
百万英镑观后感
2015/06/09 职场文书
职位证明模板
2015/06/23 职场文书
2016年元旦主持词
2015/07/06 职场文书
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android