• onblur 对象失去焦点事件


    onblur 对象失去焦点事件

    一、总结

    1、几乎所有的控件都支持onblur事件

    二、简介

    onblur 事件

    定义和用法

    onblur 事件会在对象失去焦点时发生。

    语法

    onblur="SomeJavaScriptCode"
    参数描述
    SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。

    支持该事件的 HTML 标签:

    <a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, 
    <button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, 
    <em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>, 
    <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, 
    <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, 
    <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, 
    <th>, <thead>, <tr>, <tt>, <ul>, <var>
    

    支持该事件的 JavaScript 对象:

    button, checkbox, fileUpload, layer, frame, password, 
    radio, reset, submit, text, textarea, window
    

    实例 1

    在本例中,我们将在用户离开输入框时执行 JavaScript 代码:

    <html>
    <head>
    <script type="text/javascript">
    function upperCase()
    {
    var x=document.getElementById("fname").value
    document.getElementById("fname").value=x.toUpperCase()
    }
    </script>
    </head>
    
    <body>
    
    输入您的姓名:
    <input type="text" id="fname" onblur="upperCase()" />
    
    </body>
    </html>

    输出:

    输入您的姓名: 

    TIY

    onblur
    如何使用 onblur 事件在用户离开输入框时执行 JavaScript 代码

    参考:

    onblur 事件
    http://www.w3school.com.cn/jsref/event_onblur.asp

    三、实例

    验证两次输入的密码是否一致,重复输入密码框失去焦点的时候自动触发

     1 <tr>
     2     <td>确认密码:</td>
     3     <td><input type="password"  id="st4" onblur="check()"></td>
     4 </tr>
     5 
     6 <script type="text/javascript">
     7         //自定义通过ID获取元素的函数
     8         function $(id){
     9             return document.getElementById(id)
    10         }
    11 
    12         function check(){
    13             var boo=$('st3').value==$('st4').value;
    14             if (boo) {
    15                 return true;
    16             }else{
    17                  alert('两次密码不一致')
    18             }
    19 
    20         }
    21 </script>
  • 相关阅读:
    居中
    <script type="text/javascript"></script>
    移动端获取全文高度
    video
    transition animation
    移动端隐藏overflow:auto滚轮
    Vue将组件data内的数据重置
    文字刚刚刚刚刚好的居中
    小程序总结(不断更新)
    vue组件之间的传值
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/8973523.html
Copyright © 2020-2023  润新知