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 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
Bootstrap4 gulp 配置详解
Jan 06 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 trim 去除空字符的定义与语法介绍
2010/05/31 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
javascript 写类方式之七
2009/07/05 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
python中字符串内置函数的用法总结
2018/09/13 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
医学院学生的自我评价分享
2013/11/19 职场文书
护士自荐信范文
2013/12/15 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
洗车工岗位职责
2014/03/15 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript