在js(jquery)中获得文本框焦点和失去焦点的方法

 更新时间:2012年12月04日 21:37:58   作者:  
文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $("p").blur(); 或$("p").blur(fn)来实现,有需要的朋友可以参考一下

先来看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手写call,apply,bind方法

    JavaScript手写call,apply,bind方法

    这篇文章主要介绍了JavaScript手写call,apply,bind方法,call,bind,apply方法都是JavaScript原生的方法,挂载在Function原型上,使得所有函数都可以调用
    2022-06-06
  • 网站404页面3秒后跳到首页的实例代码

    网站404页面3秒后跳到首页的实例代码

    我们看到很多网站会有有错误404页面,当页面不存存时就会提示,然后过几秒就会自动跳到首页了,下面我来给大家举一个404错误页面跳到首页实例,各位可参考,有需要的朋友可以参考一下
    2013-08-08
  • TypeScript入门-基本数据类型

    TypeScript入门-基本数据类型

    本文主要介绍了TypeScript基本数据类型的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • javascript自执行函数

    javascript自执行函数

    本文主要介绍了javascript自执行函数的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript中如何让 x == 1 && x == 2 && x == 3 等式成立

    JavaScript中如何让 x == 1 && x == 2 && x == 3 等式成立

    这篇文章主要介绍了JavaScript中如何让x==1&&x==2&&x==3等式成立,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-07-07
  • JS如何通过FileReader获取.txt文件内容

    JS如何通过FileReader获取.txt文件内容

    今天小编就为大家分享一篇JS如何通过FileReader获取.txt文件内容,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-12-12
  • setTimeout 不断吐食CPU的问题分析

    setTimeout 不断吐食CPU的问题分析

    有时候我们在使用setTimeout的时候会导致IE特别占用cpu,有可能会导致死机等情况。
    2009-04-04
  • JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果

    JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果

    这篇文章主要介绍了JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果,可实现使用JavaScript判断密码框是否获得焦点来隐藏与显示提示文字,非常简单实用,需要的朋友可以参考下
    2015-11-11
  • 详细讲解JavaScript中的this绑定

    详细讲解JavaScript中的this绑定

    在javascript的函数中,除了声明时定义的形参之外,每个函数还可以接收两个附加的参数:this和arguments。这里就讲一下this的作用以及不同场景下它的不同指向。
    2016-10-10
  • 鼠标经过显示二级菜单js特效

    鼠标经过显示二级菜单js特效

    本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下
    2013-08-08

最新评论