输入数字接受尾随破折号

Posted 2023-03-05

【中文标题】输入数字接受尾随破折号

【英文标题】：input number accepts trailing dashes

【发布时间】：2018-10-08 10:00:22

【问题描述】：

如何阻止输入的可接受尾随破折号的数量（值如“10-”或“10-7”）？如果您输入错误的格式 Input 不会给您任何值。

<input name="Number" type="number">

【问题讨论】：

您希望能输入什么号码？默认数字输入将允许大多数人不需要的很多东西（例如e）

【参考方案1】：

可以使用pattern属性：

<input name="Number" type="number" pattern="[0-9]*">

【参考方案2】：

如果不验证输入的值，这是不可能的。

由于它是一个表示数字的字符串，因此无法确定该字符串是否表示数值。

Permitted 属性不会让您验证数字输入控件的值。

在 javascript 的帮助下执行此操作的一种方法可能如下所示。

var numInput = document.querySelector('input');

// Listen for input event on numInput.
numInput.addEventListener('input', function()
    // Let's match only digits.
    var num = this.value.match(/^\d+$/);
    if (num === null) 
        // If we have no match, value will be empty.
        this.value = "";
    
, false)



<input name="Number" type="number" min="0" >

【参考方案3】：

function validate(evt) 
  l = document.getElementsByTagName('input')[0].value.length;
  if(l === 0 && String.fromCharCode(evt.keyCode) === '-') return
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) 
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  

<input type='text' onkeypress='validate(event)' />

【讨论】：

好的，让我澄清一下，我仍然希望能够输入负数。

【参考方案4】：

将 keydown 事件绑定到输入，如果 keyCode == 189 或 keyCode == 69，则 preventDefault()

【讨论】：

这与 Yernar 的回答有何不同