jQuery 文本框得失焦点的简单实例
更新时间：2014年02月19日 09:40:40 作者：
本篇文章主要是对jQuery 文本框得失焦点的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
版本一
css代码部分：
复制代码 代码如下:
.focus {
border: 1px solid #f00;
background: #fcc;
}
当焦点获得时，添加focus样式，添加边框，并改背景色为#fcc
html代码部分：
复制代码 代码如下:
<body>
<form action="" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">名称:</label>
<input id="username" type="text" />
</div>
<div>
<label for="pass">密码:</label>
<input id="pass" type="password" />
</div>
<div>
<label for="msg">详细信息:</label>
<textarea id="msg" rows="2" cols="20"></textarea>
</div>
</fieldset>
</form>
</body>
这里有两个input，一个textare框。
:input匹配 所有 input, textarea, select 和 button 元素。
jQuery代码部分：
复制代码 代码如下:
<script type="text/javascript">
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
})
</script>
用:input匹配所有的input元素，当获取焦点时，就添加样式focus，通过$(this)自动识别当前的元素。focus()方法是获取焦点事件发生时执行的函数。blur()方法是失去焦点事件发生时执行的函数。
版本二：
有时候文本框里有默认的内容，作为提示信息，获取焦点后，要让它消失。可以做如下的改造：
复制代码 代码如下:
<script type="text/javascript">
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
if($(this).val() ==this.defaultValue){
$(this).val("");
}
}).blur(function(){
$(this).removeClass("focus");
if ($(this).val() == '') {
$(this).val(this.defaultValue);
}
});
})
</script>
做个逻辑判断，如果值为默认值，就将文本框中的内容清空。
失去焦点，如果文本框中为空，也就是没有输入内容，就将值还设为默认值。
这是一个简单的逻辑。
相关文章
jquery attr方法获取input的checked属性问题
如果使用jquery,应使用prop方法来获取和设置checked属性，不应使用attr,需要的朋友可以参考下2014-05-05
下面小编就为大家带来一篇基于easyui checkbox 的一些操作处理方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
html文件中jquery与velocity变量中的$冲突的解决方法
在使用velocity模版引擎的环境下，使用jquery时其中$与velocity变量中的$冲突，下面有个不错的解决方法，感兴趣的朋友可以参考下2013-11-11
这篇文章主要为大家详细介绍了jQuery常用选择器的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
本文将利用jquery实现页面图片等比例放大和缩小。说明: 页面中经常需要将未知大小的图片展示在有限的空间里, 如果直接指定图片的width和height值, 就有可能造成图片走样, 这段代码就是为解决这个问题设计2014-02-02
这篇文章主要为大家详细介绍了jQuery制作input提示内容，兼容IE8以上，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了jQuery实现导航高亮的方法,涉及针对鼠标事件的相应及页面元素属性动态变换的相关操作技巧,并附带demo源码供读者下载,需要的朋友可以参考下2016-11-11
想要实现从本地中加载json文件，通过事件来动态的插入到ul中时，遇到了一小bug,下面小编给大家解答下2016-12-12
这篇文章主要介绍了使用jQuery制作基础的Web图片轮播效果的实例,鼠标悬停时可停止而离开时可自动轮播,文中还介绍了一种使用zslider插件来实现的方法,比较犀利,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了从如何写JQuery插件，需要注意的事项，还有必须要做的步骤，看过这个文章相信你会明白如何写好一个JQuery插件2013-11-11
最新评论