如何通过`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()的{​​{1}}函数。

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

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

更新：1

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

• 正确的用户输入：

  function myFunction(number_entered_by_user)

• 错误的用户输入：

  生成警报：

  //No action, simply continue
  

这是我的剧本：

alert("Enter proper PHONE NUMBER");

更新2

初始<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> 代码：

<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)">
  

但是当我输入无效输入（11位数字）时，如下所示，<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> 没有显示：

@ 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
  }
}