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. 细分java环境中的JDK、JVM、JRE

    细分java环境中的JDK.JVM.JRE 近来小看了下Android,扑面而来一堆概念JDK.JVM.JRE.SDK.NDK.ADT.缕了一下,其中JDK.JVM.JRE是java环境的东西,而SD ...

  2. 让OData和NHibernate结合进行动态查询

    OData是一个非常灵活的RESTful API,如果要做出强大的查询API,那么OData就强烈推荐了.http://www.odata.org/ OData的特点就是可以根据传入参数动态生成Ent ...

  3. [MySQL性能优化系列]提高缓存命中率

    1. 背景 通常情况下,能用一条sql语句完成的查询,我们尽量不用多次查询完成.因为,查询次数越多,通信开销越大.但是,分多次查询,有可能提高缓存命中率.到底使用一个复合查询还是多个独立查询,需要根据 ...

  4. __weak与__block区别，深层理解两者区别

    准备工作 首先我定义了一个类 MyObject 继承 NSObject,并添加了一个属性 text,重写了description方法,返回 text 的值.这个主要是因为编译器本身对 NSString ...

  5. class.c 添加中文注释（3）

    int class_device_register(struct class_device *class_dev) { /* [cgw]: 初始化一个struct class_device */ cl ...

  6. 域普通用户执行金蝶K/3权限不够解决方法

    一.问题 公司财务部的机器加入域后,用户一直授予本地管理员的权限,主管坚持要撤销管理员权限,而金蝶K3没管理员权限又无法执行. 报错信息为“注册表许可权不够,请参考安装目录的帮助档案进行许可权的配置. ...

  7. CentOS下开启mysql远程连接，远程管理数据库

    当服务器没有运行php.没装phpmyadmin的时候,远程管理mysql就显得有必要了.因为在CentOS下设置的,所以标题加上了CentOS,以下的命令在debian等系统下应该也OK. mysq ...

  8. 项目游戏开发日记 No.0x000005

    14软二杨近星(2014551622) 还有一周就要交项目了, 看着周围的人也都忙碌了起来, 看着大部分人的项目都已经初具容貌, 我们团队里面也搞得人心惶惶, 一来是, 时间不多了, 还有很多事情要做 ...

  9. linux-虚拟机centos6.5安装tools

    1.在VMWare选VM -> Install VMWare Tools-,就会在桌面出现VMWare Tools图示让你安裝 2.进入CentOS桌面后,将光盘打开,看到了VMWareTool ...

  10. mac下搭建redis环境

    一.redis简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zset(有 ...