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. 仿喜马拉雅实现ListView添加头布局和脚布局

     ListView添加头布局和脚布局 之前学习喜马拉雅的时候做的一个小Demo,贴出来,供大家学习参考: 如果我们当前的页面有多个接口.多种布局的话,我们一般的选择无非就是1.多布局:2.各种复杂滑动 ...

  2. Unity、c#中的拓展方法讲解

    很早以前看过这个东西,但是没有真正的用到过,希望之后会用到上面的方法, 大概的意思是这样的c#中尤其在用Unity的时候,已有的框架提供给我们一些固定的方法,但是有时我们想对这些方法进行修改, 这时我 ...

  3. Webform（七）——内置对象（Session、Application）和Repeater的Command操作

    内置对象:用于页面之间的数据交互 为什么要使用这么内置对象?因为HTTP的无状态性. 一.内置对象 (一)Session 跟Cookies一样用来存储用户数据 1.Session.Cookies对比 ...

  4. 轻量级ORM框架——第一篇：Dapper快速学习

    我们都知道ORM全称叫做Object Relationship Mapper,也就是可以用object来map我们的db,而且市面上的orm框架有很多,其中有一个框架 叫做dapper,而且被称为th ...

  5. 封装系统（以封装Windows 7为例）

    安装步骤: 1.安装系统 2.启用Administrator帐户 3.进行简单的系统设置 4.系统精简 5.安装Adobe Flash Player 6.设置IE主页 7.在系统盘(C盘)创建Sysp ...

  6. Nginx支持比Apache高并发的原因

    1.先从各自使用的多路复用IO模型说起:  select模型:(apache使用,由于受模块等限制,用的不多)   单个进程能够 监视的文件描述符的数量存在最大限制 select()所维护的 存储大量 ...

  7. Laravel与Repository Pattern(仓库模式)

    为什么要学习Repository Pattern(仓库模式) Repository 模式主要思想是建立一个数据操作代理层,把controller里的数据操作剥离出来,这样做有几个好处: 把数据处理逻辑 ...

  8. [LeetCode] Minimum Height Trees 最小高度树

    For a undirected graph with tree characteristics, we can choose any node as the root. The result gra ...

  9. 在Windows7上如何找到Cookie（亲测100%可找到）

    摘要 出于兴趣爱好,前一阵子做了一个网页,网页中需要用到Cookie,但是,根据书上的说明,并没有找打教材中所说的Cookie的位置,本文就主要介绍在计算机(Win7)中Cookie的存放位置,同样适 ...

  10. c#与JavaScript实现对用户名、密码进行RSA非对称加密

    博主最近手上这个项目呢(就是有上百个万恶的复杂excel需要解析的那个项目,参见博客:http://www.cnblogs.com/csqb-511612371/p/4885930.html),由于是 ...