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. 移动信息化不能延续PC时代的痛

    当下,随着移动时代的到来,手机功能逐步完善,各个行业针对这一现象纷纷制定了相应的营销计划,于是霎时间兴起了一股网上订票/网上订饭/网上预约的热潮. 而对于IT行业,成为企业信息化最火的代名词莫过于移动 ...

  2. iOS开发--面试

    今天一大清早去面试, 公司距离我家还挺近的, 花了一个小时走着去, 也顺路印下简历, 理理思路, 到了公司面试官什么的都不错, 还给我讲了很多知识, 收货也是满满的, 总结下今天都遇到了哪些问题, 调 ...

  3. xml文件解析(解析以后在RootTableViewController输出)

    这是从美团弄得xml文件,地区和经纬度. 你点了地区以后 ,  就可以查看经纬度 ,因为笔者懒, 有现成的文本框 , 所有偷懒了. 下面是一些枯燥的代码了 . #import <UIKit/UI ...

  4. [hadoop in Action] 第3章 Hadoop组件

    管理HDFS中的文件 分析MapReduce框架中的组件 读写输入输出数据   1.HDFS文件操作   ［命令行方式］   Hadoop的文件命令采取的形式为: hadoop fs -cmd < ...

  5. 安装phpstudy之后发现80端口被占用

    安装phpstudy之后发现80端口被占用: 进入cmd的界面,在输入"netstat -ano",按回车键后,会显示当前电脑中程序占用的端口和程序ID等等信息:看到第一条就是:0 ...

  6. [原创]最近使用React-Native的适配问题和警告搜集

    主要记录一下最近使用RN 0.29.2版本遇到的适配的坑以及部分警告的解法. 适配类: 安卓输入框圆角.边框颜色.粗细等无法设置成功,需要在TextInput外面新增一个View设置圆角,TextIn ...

  7. Windows7 忘记密码的解决办法

    由于无法使用管理员帐号进入Windows 7,辅助工具比较大,已经回不到xp时代的pe一键删除密码了,不过用Windows 7的system账户运行cmd命令可以强制修改账户密码!就拿xp+Windo ...

  8. IISExpress Log 文件路径

    问题 用VS做开发时经常用IISExpress测试web程序,那么在测试过程中生成的Log文件放在哪里了? 答案 情况1 默认情况下 applicationhost.config 文中定义了连个日志文 ...

  9. java实现单链表的整表创建

    package com.java.dataStruct; public class Node<E> { E item; Node next; public Node(){ } public ...

  10. 编程语言吉祥物之Duke

    在看到这个可爱的小家伙前,我一直以为那个咖啡杯子是Java的吉祥物.直到拿到<Java性能优化权威指南>这本书,才知道有这个小东西Duke.这位可爱的Duke是由Joe Palrang在1 ...