为什么输入模式属性不适用于数字

Why is input pattern attribute not working for numerics?

本文关键字：适用于 数字 不适用 属性 输入模式 为什么      更新时间：2023-09-26

我无法将文本输入上的模式属性限制为数字。 根据 javascript 正则表达式列表，[d] 或 [0-9] 应该这样做。 但在 

<input dir="ltr" type="text" title="Enter numbers only." pattern="['d]{9}" id="uid" name="1" placeholder="Enter UID" required="'required'" class="required placeholder" minlength="9" maxlength="9" autocomplete="off" />

它对我不起作用（在任何浏览器中）。 我必须添加js验证，如下所示（基于这篇文章，为了简单起见，决定走这条路）：

.HTML：

onkeypress='return isNumberKey(event)'

.js：

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

我主要想知道是否有办法让模式属性工作。 但也请随时评论我是否为此使用最佳实践路线。 我不想使用HTML5 <input type="number"/>因为它还没有得到足够的广泛支持。

对 pattern 属性的验证不会阻止将不正确的信息写入字段，但会阻止提交表单。该元素还有一个 oninvalid 事件，当提交期间验证失败时将调用该事件。

或者，您也可以使用 CSS 选择器:valid和:invalid来提供即时视觉反馈。

小提琴

显示两者（基于评论中杰瑞的小提琴）： http://jsfiddle.net/bHWcu/1/

<form onsubmit="alert('Submitted');">
    <input dir="ltr" type="text" title="Enter numbers only." pattern="['d]{9}" id="uid" name="1" placeholder="Enter UID" required="'required'" class="required placeholder" maxlength="9" autocomplete="off" />
    <input type="submit" value="Submit" />
</form>

请注意，任何客户端验证都应仅用于快速反馈以改善用户体验。实际验证应始终在服务器端完成，因为客户端验证很容易被欺骗。

pattern 属性仅在表单的值不匹配时阻止提交表单。为了实际防止用户输入无效文本，可以使用checkValidity()。

演示：

let prevVal = "";
document.querySelector('input').addEventListener('input', function(e){
  if(this.checkValidity()){
    prevVal = this.value;
  } else {
    this.value = prevVal;
  }
});
Only enter digits: <input pattern="[0-9]*">

Unmitigated答案的修订版。

let prevVal = "";
document.addEventListener("DOMContentLoaded", function(){
//window.addEventListener('load',function(){
    document.querySelector('INPUT').addEventListener('input', function(e){
      if(this.checkValidity()){
        prevVal = this.value;
      } else {
        this.value = prevVal;
      }
    });    
});
相关文章：