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


Posted in Javascript onFebruary 19, 2014

版本一

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>

做个逻辑判断,如果值为默认值,就将文本框中的内容清空。

失去焦点,如果文本框中为空,也就是没有输入内容,就将值还设为默认值。

这是一个简单的逻辑。

Javascript 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
node.js博客项目开发手记
Mar 16 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
js实现二级联动简单实例
Jan 11 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
javascript前端实现多视频上传
Dec 13 Javascript
javascript之Object.assign()的痛点分析
Mar 03 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 #Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 #Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 #Javascript
JS执行删除前的判断代码
Feb 18 #Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 #Javascript
jquery的live使用注意事项
Feb 18 #Javascript
js如何获取object类型里的键值
Feb 18 #Javascript
You might like
php的大小写敏感问题整理
2011/12/29 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
深入理解NumPy简明教程---数组1
2016/12/17 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
银行实习自我鉴定
2013/10/12 职场文书
广告设计应届生求职信
2014/03/01 职场文书
劲霸男装广告词
2014/03/21 职场文书
协会周年庆活动方案
2014/08/26 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
个人收入证明模板
2014/09/18 职场文书
小学体育课教学反思
2016/02/16 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
python使用glob检索文件的操作
2021/05/20 Python