jQuery文本框中的事件应用

时间：2022-04-03 11:49:08
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文本框&lpar;input textare&rpar;事件绑定方法教程

    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. &lbrack;jQuery&rsqb;文本框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&period;7KB的jQuery文本框输入提示插件

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

随机推荐

  1. Java获取当前时间年月日、时间格式化打印、字符串转日期

    package com.sysc.simple; import java.text.ParseException; import java.text.SimpleDateFormat; import ...

  2. 去除DedeCms 5&period;7后台版权广告链接的方法

    织梦DedeCms 5.7后台有很多的织梦官方的广告链接,下面我们来将这些广告去掉吧. 一.去处后台登陆页login.php广告链. 1.找到登录界面模板文件/dede/templets/login. ...

  3. Android弹出选项框及指示箭头动画选择

     Android弹出选项框及指示箭头动画选择 Android原生的Spinner提供了下拉列表选项框,但在一些流行的APP中,原生的Spinner似乎不太受待见,而通常会有下图所示的下拉列表选项框 ...

  4. Codeforces Round &num;199 &lpar;Div&period; 2&rpar; B&period; Xenia and Spies

    B. Xenia and Spies time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  5. ActiveMQ讯息传送机制以及ACK机制

    http://blog.csdn.net/lulongzhou_llz/article/details/42270113 ActiveMQ消息传送机制以及ACK机制详解 AcitveMQ是作为一种消息 ...

  6. 玩转SSH端口转发

    SSH有三种端口转发模式,本地端口转发(Local Port Forwarding),**远程端口转发(Local Port Forwarding)**以及**动态端口转发(Dynamic Port ...

  7. linux&plus;tomcat&plus;jdk环境验证码无法显示

    我的环境配置:RHEL6.5+tomcat6+jdk1.6 今天遇到一个奇怪的现象,我的tomcat启动起来之后,网站无法显示验证码,导致无法登陆.我的tomcat启动过程是这样的: 我有一个进程守护 ...

  8. JavaScript中数组map&lpar;&rpar;方法

    JavaScript 数组map()方法创建一个新的数组使用调用此数组中的每个元素上所提供的函数的结果.语法 ? 1 array.map(callback[, thisObject]); 下面是参数的 ...

  9. js基础-基本包装类型

    var t = 13; t.toString(); //t是一个简单数值类型 现在有了方法 toString 对象类型的方法 //数值类型有对应的包装类型 var t1 =new Number(333 ...

  10. Leetcode&colon; Longest Consecutive Sequence &amp&semi;&amp&semi; Summary&colon; Iterator用法以及ConcurrentModificationException错误说明

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...

相关文章