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 相关文章推荐
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
js实现滑动进度条效果
Aug 21 Javascript
解读Vue组件注册方式
May 15 Vue.js
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截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
python 简单的多线程链接实现代码
2016/08/28 Python
使用python实现knn算法
2017/12/20 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
Keras设置以及获取权重的实现
2020/06/19 Python
python 如何调用远程接口
2020/09/11 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
社团文化节策划书
2014/02/01 职场文书
创先争优活动承诺书
2014/08/30 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS