在类型输入框中仅允许负号作为第一个字符"number"

Question

是否有一种方法只允许在类型为"number"的输入标记中的第一个字符使用负号(或连字符(？它必须键入"数字"，以便在手机上显示正确的键盘。但是，用户在单击"提交"之前仍然可以输入多个负号。我使用了.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;
}
}

感谢您的帮助。谢谢

Answer 1

使用自定义Regexp测试输入。开头只允许使用一个连字符。

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

所以代码块可能是

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

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

Answer 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}`;
});

<input id="myInput" type="text" />

Answer 3

patternHTML属性目前得到了很好的支持，因此您可以将其用于此验证。

尝试使用下面代码段中的表单——如果值不是数字，则会出现工具提示，表单不会提交没有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>

Answer 4

尝试：

<input type="number" id="input" oninput="this.value.match(/^-?d*.?d*$/)||(this.value='');">