python web py入门(54)- jQuery - 失去焦点事件

原创 2018年04月15日 11:57:23
前面学习了获取输入文本框的内容,并且实现在弹出窗口里提示显示出来。接着下来需要对内容进行检查,又学习了使用对象的方式来构造通用的对象。这些内容都准备好了,接着要怎么样做呢?其实可以这样思考,有了内容,有了检验的方法,就剩下什么时候运行,以及运行的动机了。这个时刻非常重要,如果运行过早,内容还没有输入完成,或者效率低下;如果运行过迟,又会导致用户感觉不舒服。在页面进行输入EMAIL地址时,什么时候检查EMAIL地址的合法性呢?可以放在提交时一起检查,也可以放在每输入一个字符时检查。如果放在提交时检查,有点偏后,因为输入很多内容之后,再回到前面去修改,要滚动比较麻烦。如果放在键入时检查,显然用户还没有输入完整,判断结果肯定不正常。查看JS里,有一个失去焦点的事件,叫做onblur(事件会在对象失去焦点时发生),它可以这样使用:
<input type="text" id="fname" onblur="upperCase()" />
在这里onblur被赋值为upperCase()函数运行。
而在jQuery里简化了这种操作,可以按下面的代码来使用:
$( "form#register #email" ).blur(function() {
            alert( "邮箱输入框已经失去焦点,调用.blur()事件触发!" );
});
在jQuery定义如下:
触发被选元素的 blur 事件。
语法
$(selector).blur()


为了体验这个事件的触发,在页面里放置两个输入文本框,然后当第一个文本框失去焦点时,就会触这个事件的响应,并弹出提示窗口。代码如下:
<html>
  <head>
    <meta charset="utf-8">
    <title>
      失去焦点的例子
    </title>
    <script type="text/JavaScript" src="jquery/jquery-3.3.1.js"></script>
    <script type="text/JavaScript">
      $(document).ready(function(){
        $( "form#register #email" ).blur(function() {
            alert( "邮箱输入框已经失去焦点,调用.blur()事件触发!" );
        });
      });
    </script>
  </head>
  <body>
    <form id="register" action="" method="POST">
      <table>
        <tbody>
          <tr>
            <td><label for="email">邮箱</label></td>
            <td><input type="text" id="email" name="email" /><span class="validate_tip"></span></td>
          </tr>
          <tr>
            <td><label for="username">帐号</label></td>
            <td><input type="text" id="username" name="username" /><span class="validate_tip"></span></td>
          </tr>
          <tr><td><input type="submit" id="register_btn" value="注册" /></td></tr>
        </tbody>
      </table>
    </form>
  </body>
</html>

运行结果如下:


当你选择第二个文本框时,就会触发这个事件运行。

Arduino入门基础
http://edu.csdn.net/course/detail/4931
Unity5.x游戏基础入门
http://edu.csdn.net/course/detail/4810
TensorFlow API攻略
http://edu.csdn.net/course/detail/4495


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/caimouse/article/details/79947991

在python中控制鼠标

一.在获得焦点的窗口中移动鼠标#coding=gbkfrom ctypes import *import timeuser32 = windll.user32kernel32 = windll.ker...
  • rangq1
  • rangq1
  • 2009-06-01 11:51:00
  • 9454

Angular 4 文本框自动获取焦点二

Angular 4 文本框自动获取焦点,
  • qq_36279445
  • qq_36279445
  • 2017-11-17 14:44:16
  • 1885

webdriver 获取元素焦点方法

做自动化过 程中,有时候我们需要给某个元素设置焦点,在selenium1.0中提供了给元素设置焦点的方法。但是在2.0中并没有该办法。如果是输入框我们可以使 用click方法,来设置焦点,但是对于li...
  • hwm831002
  • hwm831002
  • 2013-11-26 13:55:06
  • 3749

获得焦点与失去焦点事件

一 介绍 获得焦点事件(onfocus)是当某个元素获得焦点时触发事件处理程序。 失去焦点事件(onblur)是当前元素失去焦点时触发事件处理程序。 一般情况下,这两个事件是同时使用的。   ...
  • chengqiuming
  • chengqiuming
  • 2017-04-12 10:38:19
  • 1939

android 焦点获取流程

android一般都是手机或者平板,所以
  • new_abc
  • new_abc
  • 2014-07-15 17:08:59
  • 14333

focus default

QPushButton,很常见很简单的一个东西。可以今天还是被它的一个default属性弄晕了。QDialog中添加一个QDialogButtonBox,然后其中始终有一个button始终处于defa...
  • not_give_up_
  • not_give_up_
  • 2017-04-26 11:59:26
  • 131

WebDriver中如何给元素设置焦点

输入框我们可以使用click方法,来设置焦点,但是对于link连接或者button如果通过click方法势必会跳转到另外页面或者提交了页面请求。通过尝试发现,如果在元素上进行右击,也可以设置焦点,但是...
  • yqyyj
  • yqyyj
  • 2014-06-06 11:34:43
  • 1976

appium+Python:popupwindow设置焦点

https://testerhome.com/topics/2721
  • juejiang_lovingyou
  • juejiang_lovingyou
  • 2017-03-07 14:39:40
  • 240

获取当前具有输入焦点控件的窗口句柄

获取当前具有输入焦点控件的窗口句柄 由于GetFocus只能本身进程调用,所以必须调用AttachThreadInput函数附加线程 HWND wnd;//窗口句柄 wnd=Ge...
  • ribut9225
  • ribut9225
  • 2014-03-20 14:53:08
  • 9778
收藏助手
不良信息举报
您举报文章:python web py入门(54)- jQuery - 失去焦点事件
举报原因:
原因补充:

(最多只允许输入30个字)