jQuery文本框中的事件应用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>jquery文本框中的事件应用</title>

    <style type="text/css">

    body{ font-size:13px;}

    /*元素初始化样式*/

    .divInit{ width:390px; height:55px; line-height:55px; padding-left:20px;}

    .txtInit{ border:solid 1px #; padding:3px; background-image:url('Images/bg_email_input.gif');}

    .spnInit{ width:179px; height:40px; line-height:40px; float:right; margin-top:8px; padding-left:10px; background-repeat:no-repeat;}

    /*元素丢失焦点样式*/

    .divBlur{ background-color:#FEEEC2;}

    .txtBlur{ border:solid 1px #; padding:3px; background-image:url('Images/bg_email_input2.gif');}

    .spnBlur{ background-image:url('Images/bg_email_wrong.gif');}

    .divFocu{ background-color:#EDFFD5;} /*div获取焦点样式*/

    .spnSucc{ background-image:url('Images/pic_Email_ok.gif'); margin-top:20px;} /*验证成功时span样式*/

    </style>

    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#txtEmail").trigger("focus"); //默认时文本框获得焦点

            $("#txtEmail").focus(function () { //文本框获取焦点事件

                $(this).removeClass("txtBlur").addClass("txtInit");

                $("#email").removeClass("divBlur").addClass("divFocu");

                $("#spnTip").removeClass("spnBlur").removeClass("spnSucc").html("请输入您常用邮箱地址！");

            });

            $("#txtEmail").blur(function () { //文本框丢失焦点事件

                var vTxt = $("#txtEmail").val();

                if (vTxt.length == ) { //文本框中是否输入了邮箱

                    $(this).removeClass("txtInit").addClass("txtBlur");

                    $("# email").removeClass("divFocu").addClass("divBlur");

                    $("#spnTip").addClass("spnBlur").html("邮箱地址不能为空！");

                }

                else { //检测邮箱格式是否正确

                    if (!chkEmail(vTxt)) { //如果不正确

                        $(this).removeClass("txtInit").addClass("txtBlur");

                        $("#email").removeClass("divFocu").addClass("divBlur");

                        $("#spnTip").addClass("spnBlur").html("邮箱格式不正确！");

                    }

                    else { //如果正确

                        $(this).removeClass("txtBlur").addClass("txtInit");

                        $("#email").removeClass("divFocu");

                        $("#spnTip").removeClass("spnBlur").addClass("spnSucc").html("");

                    }

                }

            });

            /*验证邮箱格式是否正确 参数strEmail，需要验证的邮箱*/

            function chkEmail(strEmail) {

                var vChk = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

                if (!vChk.test(strEmail)) {

                    return false;

                }

                else {

                    return true;

                }

            }

        });

    </script>

</head>

<body>

<form id="form1" action="#">

    <div id="email" class="divInit">邮箱:

        <span id="spnTip" class="spnInit"></span>

        <input type="text" id="txtEmail" class="txtInit" />

    </div>

</form>

</body>

</html>

jQuery文本框中的事件应用的更多相关文章

  1. Jquery文本框值改变事件兼容性

    Jquery文本框值改变事件(支持火狐.ie)   Jquery值改变事件支持火狐和ie浏览器,并且测试通过,绑定后台代码可以做成autocomplete控件. 具体代码列举如下: ? $(docum ...

  2. jQuery文本框(input textare)事件绑定方法教程

    jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...

  3. jquery文本框内容改变事件

    /** * 内容改变时并不会触发事件,但是在失去焦点的时候会触发. */ $("#inputid").change(function(){ console.log($(this). ...

  4. Jquery文本框值改变事件（支持火狐、ie）

    Jquery值改变事件支持火狐和ie浏览器,并且测试通过,绑定后台代码可以做成autocomplete控件. 具体代码列举如下: $(document).ready(function () { $(& ...

  5. [jQuery]文本框text变化事件

    $("#key").live("keyup",function(){   })

  6. JQuery初始加载时注册文本框失去焦点事件

    在JQuery初始加载时注册文本框失去焦点事件 $(function(){ $('#文本框ID').blur(function(){ //对文本框内容进行处理 }); });

  7. 文本框的onchange事件，如何兼容各大浏览器

    在项目中经常会遇到对用户输入的数据进行实时校验,而不是等文本框失去焦点或用户手动点击校验. 首先分析下在哪些情况下文本框会产生change事件. 1.用户通过键盘入正常字符时: 2.用户通过键盘输入非 ...

  8. 文本框脚本 - select 事件

    HTML中,用两种方式来表示文本框: input 单行文本.textarea 多行文本 那么在文本中存在哪些事件尼? 1    select 都支持 但是其触发的时机不一样 IE9+ .Safair ...

  9. 分享一个仅0.7KB的jQuery文本框输入提示插件

    由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...

随机推荐

  1. React Native之 Navigator与NavigatorIOS使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  2. ListView之多种类型Item

    一.概述 一般而言,listview每个item的样式是一样的,但也有很多应用场景下不同位置的item需要不同的样式. 拿微信举例,前者的代表作是消息列表,而后者的典型则是聊天会话界面. 本文重点介绍 ...

  3. 实用的圆形图片控件ImageView

    1.用法直接在布局中引用即可 import android.content.Context;import android.content.res.TypedArray;import android.g ...

  4. 19－typedef

    本文目录 一.typedef作用简介 二.typedef与指针 三.typedef与结构体 三.typedef与指向结构体的指针 四.typedef与枚举类型 五.typedef与指向函数的指针 六. ...

  5. Dojo: Quick Start

      1.Dojo学习地址 2.Dojo快速开始 2.1.Dojo引入 2.2.指定Dojo模块的位置 2.3.模块加载require 3.查找Dom节点 3.1.根据id查找dom节点 3.2.根据c ...

  6. Scala基础语法 （一）

    如果你之前是一名 Java 程序员,并了解 Java 语言的基础知识,那么你能很快学会 Scala 的基础语法. Scala 与 Java 的最大区别是:Scala 语句末尾的分号 ; 是可选的. 我 ...

  7. cstore_fdw的安装使用以及源码分析

    一.cstore_fdw的简介 https://github.com/citusdata/cstore_fdw,此外部表扩展是由citusdata公司开发,使用RC_file格式对数据进行列式存储. ...

  8. 8.dns服务的搭建

    一．DNS的相关配置文件 /etc/hosts    本地主机列表 /etc/nssswitch.conf     本地主机查询方式 /etc/host.conf /etc/resolv.conf   ...

  9. 原： 安装VMtools过程流水帐

    以下基于 vm12.0.0 1. 一定要打开虚拟机的 cd设置 2. 然后 cd   '/medal/VMware tools '   (注意一定要加 '', 因为VMware tools 有空格) ...

  10. java 集合

    1. 2.for循环的时候会改变角标,所以删除需要--,增加需要++ 3.去除重复元素2(用的实质都是对象的equals方法) 4.Treeset 里面的add方法 5.treeSet里面addstu ...