Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jQuery 文本框得失焦点的简单实例

jQuery 文本框得失焦点的简单实例

发布时间:2014-07-04   编辑:www.jquerycn.cn
本篇文章主要是对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设置焦点方法focus()和jquery失去焦点方法blur()
Jquery实现获取焦点、失去焦点的代码
文本框获得焦点与失去焦点实现代码
表单类各种类型(文本框)失去焦点效果jquery代码
jquery获取焦点和失去焦点事件代码
jquery-1.2.6得到焦点与失去焦点的写法
jQuery 文本框得失焦点的简单实例
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
jQuery限制只能输入数字与失去焦点获取焦点
jQuery 表单验证扩展(四)

关键词: jQuery  焦点   
[关闭]