“数字”类型输入框中只允许负号作为第一个字符答案

【问题标题】：Only allow negative sign as first character in "number" type input box“数字”类型输入框中只允许负号作为第一个字符
【发布时间】：2020-03-14 02:57:12
【问题描述】：

有没有办法只允许“数字”类型的输入标签中的第一个字符使用负号（或连字符）？它必须输入“数字”，以便正确的键盘出现在移动设备上。但是，用户仍然可以在单击“提交”之前输入多个负号。我使用了.checkValidity()，这有帮助，但除非我先输入数字，否则首先会阻止输入负号。我无法使用.value 进行验证，因为如果无效则返回空白。

HTML

<input type="number" id="input">

JavaScript

var input = document.querySelector('#input');
var value;

input.oninput = function() { 
    if (input.checkValidity()) {
        value = input.value;
    }
    else{
        input.value = value;
    }
}

感谢任何帮助。谢谢！

【问题讨论】：

您认为这可能不是一个好主意吗？您的用户很可能会粘贴一个数字。如果不幸的是他们还复制了一些额外的文本甚至只是一个空格，那么您的脚本将丢弃所有内容，否则他们本可以更正输入。 IMM 最好是让你的用户知道它是无效的，但不要自动清除它。

标签： javascript html validation

【解决方案1】：

使用自定义正则表达式来测试输入。开头只能使用一个连字符。

/^[-0-9][0-9]+$/.test(input)

所以代码块可能是

input.oninput = function() { 
  if (/^[-0-9][0-9]+$/.test(input.value)) {
      value = input.value;
  }
  else{
      input.value = value;
  }
}

我没有测试过，但我认为这会有所帮助。

【讨论】：

不幸的是，这不起作用，因为当您在“数字”类型的输入字段上使用 .value 时，它只会获得有效的数值，而不是整个文本，但谢谢！

【解决方案2】：

您可以使用只匹配数字的正则表达式，然后在输入时检查匹配并相应地设置输入值。

const el = document.querySelector('#myInput');
el.value = '-';

el.addEventListener('input', e => {
  const m = e.target.value.match(/\d+/g);
  el.value = m === null ? '-' : `-${m}`;
});

&lt;input id="myInput" type="text" /&gt;

【讨论】：

这适用于“文本”类型，但我需要它用于“数字”类型，并且 JS 在有有效数字之前不会获取值。
你的意思是JS不会得到价值？它绝对会......我知道它是一种文本类型，但它只允许你输入你可以做的数字Number(val)

【解决方案3】：

pattern HTML 属性如今已经相当不错了supported，因此您可以将它用于此验证。

尝试使用下面 sn-p 中的表单 -- 如果值不是数字，则会出现工具提示并且表单不会提交。 没有 JS。

<form action="#">
  <input type="number" id="input" pattern="^-?\d+$">
  <input type="submit">
</form>

要在用户输入时进行验证，您需要 JS：

input:invalid {background:#f009}

<form action="#">
  <input type="number" id="input" pattern="^-?\d+$" oninput="this.checkValidity()">
  <input type="submit">
</form>

【讨论】：

这是个好主意，但不幸的是，我需要它立即验证，而不是在提交时。我试过了，在输入实数之前它不会检查正则表达式。

【解决方案4】：

试试：

&lt;input type="number" id="input" oninput="this.value.match(/^-?\d*\.?\d*$/)||(this.value='');"&gt;

【讨论】：

不幸的是，这不允许有人先输入负号。
@Max 我修改了我的答案。看看是不是你的想法。