简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - JS中的onblur事件为什么使用Tab键跳格时无效？
天蓬老师
天蓬老师 2017-04-11 12:07:38
0
2
756

1、使用onblur进行用户输入验证的时候出现了这样的问题：

第一种操作方式：光标开始在用户名输入框，然后鼠标点击空白处：

第二种操作方式：光标在用户名输入框，然后按Tab键，跳到邮箱地址输入框：

第二种并没有触发onblur事件，这是为什么呢？？？

<input type="text" class="form-control" name="username" id="username" required placeholder="真实姓名" onfocus="insertName()" onblur="checkName()"/><label id="innerName"></label>
    </p>
    <p class="form-group">
    <label for="email">邮箱</label>
    <input type="email" class="form-control" name="email" id="email" required placeholder="邮箱地址" onfocus="insertName()" onblur="checkEmail()"><label id="innerEmail"></label>

附上main.js的代码：

/**
 * 用户名检测
 */
function checkName(){
    var username = document.getElementById("username").value;
    if(username==""){
        document.getElementById("innerName").innerHTML = "用户名不能为空";
    }
}
/**
 * 邮箱检测
 */
function checkEmail() {
    var email = document.getElementById("email").value;
    if (email==""){
        document.getElementById("innerEmail").innerHTML = "邮箱不能为空";
    }
}

-------------------------------------------------------------------更新--------------------------------------------------------
register.jsp:

<head>
    <script src="${path}/js/jquery-3.1.1.min.js"></script>
    <script src="${path}/js/main.js" type="text/javascript"></script>
</head>
<body>
<form action="/reg/doRegister.action" method="post">
    <p>
    <label>用户名</label>
    <input type="text" name="username" id="username" onfocus="insertName()" onblur="checkName()"/><label id="innerName"></label>
    </p>
    <p>
    <label for="email">邮箱</label>
    <input type="email" name="email" id="email" onfocus="insertName()" onblur="checkEmail()"><label id="innerEmail"></label>
    </p>
    <p>
    <label for="password">密码</label>
    <input type="password" name="password" id="password" onfocus="insertName()" onblur="checkPass()"><label id="innerPass"></label>
    </p>
    <p>
        <p ><a href="#">同意条款</a></p>
        <input type="submit" value="注册">
    </p>
</form>
</body>

main.js:

function checkName(){
    var username = document.getElementById("username").value;
    if(username==""){
        document.getElementById("innerName").innerHTML = "用户名不能为空";
    }
}
/**
 * 邮箱检测
 */
function checkEmail() {
    var email = document.getElementById("email").value;
    if (email==""){
        document.getElementById("innerEmail").innerHTML = "邮箱不能为空";
    }
}
/**
 * 密码检测
 */
function checkPass() {
    var password = document.getElementById("password").value;
    if (password==""){
        document.getElementById("innerPass").innerHTML = "密码不能为空";
    }

}

function insertName() {
    document.getElementById("innerName").innerHTML="";
    document.getElementById("innerPass").innerHTML="";
    document.getElementById("innerEmail").innerHTML="";
}
天蓬老师
天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全員に返信(2)
阿神
阿神2017-04-11 12:09:38 2棟

乍一看, 感觉是你的代码的问题, 实际上应该就是你的代码有问题.

亲测:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="jquery.min.js"></script>
  1: <input type="text" name="" data-id="1">
  2: <input type="text" name="" data-id="2">
  <script>
    $(function(){
      $("input").on("blur", function(){
        console.log("blur: " + $(this).data("id"));
      })
    });
  </script>
</body>
</html>
いいねを押す +0
返信を追加
Peter_Zhu
Peter_Zhu2017-04-11 12:09:38 1棟

正常来说是能触发的。
你看看是不是姓名的onblur跟邮箱的onfocus方法冲突了啊

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！