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 选取方法都有哪些
May 18 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 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中的output_buffering详细介绍
2014/09/27 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
package.json文件配置详解
2017/06/15 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
Django分组聚合查询实例分享
2020/04/29 Python
python判断是空的实例分享
2020/07/06 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
班子成员四风问题自我剖析材料
2014/09/29 职场文书
大班上学期个人总结
2015/02/13 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python