javascript - 如何通过 `number_entered_by_user` 事件在 Javascript 中传递 `onfocusout(number_entered_by_user)`

Question

我如何通过 number_entered_by_user在 Javascript 中通过 onfocusout(number_entered_by_user)事件？

Javascript 和 DOM 操作方面的新功能。已在此站点上搜索但无法找到相关答案。

我有一个 <input>标记如下:

<input type="number" id="txt_qu_12" onkeydown="return checkKeycode(event);" class="elementid" placeholder="" min="" max="">

我正在尝试更改 <input> 的验证标记如下:

<input type="number" id="txt_qu_12" onfocusout="myFunction(number_entered_by_user)" class="elementid" placeholder="" min="" max="">

在onfocusout期间用户输入事件将传递给 myFunction() User Input Validation 的函数.

哪里myFunction(number_entered_by_user)定义为:

<script>
<!--
function myFunction(event)  
{  
  var phoneno = event.target.value;
  var phoneno_templete = /^\d{10}$/;  
  if((phoneno.value.match(phoneno_templete))  
        {  
      return true;  
        }  
      else  
        {  
        alert("Enter proper PHONE NUMBER");  
        return false;  
        }  
} 
// -->
</script>

我的问题是如何通过 number_entered_by_user通过onfocusout函数事件 function myFunction(number_entered_by_user)

欢迎任何建议和指点。提前致谢。

---

更新:1

根据@randomguy04 的反问，我的目标是:

• 正确的用户输入:

  //No action, simply continue
  

• 对于错误的用户输入:

  将警报生成为:

  alert("Enter proper PHONE NUMBER");
  

这是我的脚本:

<script>
function myFunction(event)  
{  
  var phoneno = event.target.value;
  var phoneno_templete = /^\d{10}$/;  
  if((phoneno.value.match(phoneno_templete))  
        {  
      return true;  
        }  
      else  
        {  
        alert("Enter proper PHONE NUMBER");  
        return false;  
        }  
} 
</script>

---

更新2

初始<input>标签:

<input type="number" id="txt_qu_12" onkeydown="return checkKeycode(event);" class="elementid" placeholder="" min="" max="">

更改为:

• 第一次尝试:

  <script>
  <!--
  function myFunction(event){  
    var phoneno = event.target.value;
    var phoneno_templete = /^\d{10}$/;  
    if(!phoneno.match(phoneno_templete)){
      alert("Enter proper PHONE NUMBER");
    }
  } 
  -->
  </script>
  <input type="number" id="txt_qu_12" class="elementid" placeholder="" min="" max="" onfocusout="myFunction(event)">
  

• 第二次尝试:

  <script>
  <!--
  function myFunction(event){  
    var phoneno = event.target.value;
    var phoneno_templete = /^\d{10}$/;  
    if(!phoneno.match(phoneno_templete)){
      alert("Enter proper PHONE NUMBER");
    }
  } 
  // -->
  </script>
  

但是当我使用无效输入(11 位数字)跳出时仍然没有 Alert如下图所示:

@randomguy04 解决方案似乎很完美，但不确定我哪里做错了。有什么建议吗？

Answer 1

您可以使用 onfocusout 函数上的 event 访问输入的值

首先调用函数并在 html 中传递事件变量:

<input type="number" id="txt_qu_12" onfocusout="myFunction(event)"/>

现在您的函数应该可以访问 event.target，这是触发事件的元素，在您的情况下，它将是 ID 为 txt_qu_12 的输入

现在您可以在您的 javascript 中访问输入的值，例如:

function myFunction(event){  
  var phoneno = event.target.value;
  var phoneno_templete = /^\d{10}$/;  
  if(!phoneno.match(phoneno_templete)){
    alert("Enter proper PHONE NUMBER"); //this will happen if the phone number is not 10 digits in length
  }
}