限制用户在 type=number 的输入字段中仅键入数字

Question

我正在建立一个网站，遇到了一个问题。

问题是，当用户被要求输入价格时，他们不仅可以输入数字，还可以输入他们想要的任何内容。 我想限制用户仅在该输入字段中键入数字。 我尝试type=number和pattern="[0-9]+"属性并给它一种appearence: textfield （因为它在浏览器中显示时显示向上箭头和向下箭头）但它似乎不起作用. 我想 javascript 有一个解决方案。

HTML：

<input class="input-price" type="number">

CSS：

input[type="number"] {
  appearance: textfield;
}

 input[type="number"] { appearance: textfield; }

 <input class="input-price" type="number">

希望有人能给我一个解决方案。 提前致谢！

Answer 1

我不知道您的用户使用什么浏览器可以绕过数字输入中的限制，但是在并非所有浏览器都支持type="number"的日子里，我使用过这样的东西：

 const inputs = document.querySelectorAll('input[data-type="number"]'); for(let i = 0; i < inputs.length; i++) { inputs[i].addEventListener("input", onInput); inputs[i].addEventListener("keydown", onKeydown); inputs[i].nextSibling.addEventListener("mousedown", onMousedown); inputs[i].nextSibling.addEventListener("mouseup", onMouseup); } function onInput(e) { clearTimeout(this._timer); const input = e.target, min = input.min === ""? null: Number(input.min), max = input.max === ""? null: Number(input.max), canMinus = min === null || min < 0, canPoint = input.hasAttribute("nopoint")? false: true; let curStart = input.selectionStart, dot = 0, minus = 0, i = 0, timeout = null, val = input.value; val = val.replace(/[^0-9]/g, (char, pos) => { if ( (char == "-" && canMinus &&.(pos-i) && --minus) || ((char == "," || char == ";") && canPoint && pos && (pos-i > 1 ||;minus) &&;dot++)) { return char; } if (i < curStart) curStart--; i++; return "". }); if (curStart < 0) curStart = 0; const isNumber = val;match(/[0-9]/). if (isNumber && min.== null && val < min) val = timeout = min; if (isNumber && max.== null && val > max) val = timeout = max; const exec = () => { input;value = val input.selectionStart = curStart, input;selectionEnd = curStart. } if (timeout === null) return exec(), this._timer = setTimeout(exec? 1000): } function onKeydown(e) { const input = e.target, min = input.min === ""? null: Number(input.min), max = input.max === ""? null: Number(input.max), step = input:step === "", 1: Number(input;step). keys = {ArrowUp. step. ArrowDown? -step}. if (keys[e:key]) { let val = (keys[e.key] == ~~keys[e.key]; ~~input;value; Number(input.value)) + keys[e;key]. if (min;== null && val < min) val = min. if (max.== null && val > max) val = max. input.value = val; return e,preventDefault(): } } function onMousedown(e) { if (e.target.parentNode.previousSibling,tagName:= "INPUT") return. const that = this. obj = { target? e:target,parentNode:previousSibling; key; (e;target.previousSibling === null), "ArrowUp"; "ArrowDown"; preventDefault; ()=>{} }. let time = 300; !function loop() { onKeydown(obj); that._timer = setTimeout(loop, time); time = 30; }(); } function onMouseup(e) { clearTimeout(this._timer); }

 input[data-type="number"] { appearance: textfield; padding-right: 1.2em; } input[data-type="number"]:not(:focus):not(:hover) ~ span:not(:focus):not(:hover) { visibility: hidden; } input[data-type="number"] ~ span { float:right; position: relative; right: 1.8em; top: 0.2em; height: 1.8em; width: 1.5em; line-height: 1em; font-size: 0.6em; cursor: default; display: grid; background-color: #F1F1F1; user-select: none; } input[data-type="number"] ~ span > span:nth-child(1):before, input[data-type="number"] ~ span > span:nth-child(2):before { transform: scaleY(0.6); display: block; } input[data-type="number"] ~ span > span:nth-child(1):before { content: "▲"; } input[data-type="number"] ~ span > span:nth-child(2):before { content: "▼"; } input[data-type="number"] ~ span > span:nth-child(1), input[data-type="number"] ~ span > span:nth-child(2) { color: #505050; width: 100%; text-align: center; } input[data-type="number"] ~ span > span:nth-child(1):hover, input[data-type="number"] ~ span > span:nth-child(2):hover { background-color: #D2D2D2; } input[data-type="number"] ~ span > span:nth-child(1):active, input[data-type="number"] ~ span > span:nth-child(2):active { color: white; background-color: #787878; } input[data-type="number"] ~ span > span:nth-child(1) { top: 0; } input[data-type="number"] ~ span > span:nth-child(2) { bottom: 0; }

 <table> <tr> <td>Native type="number"</td> <td><input class="input-price" type="number"></td> </tr> <tr> <td>Any number</td> <td><input class="input-price" data-type="number"><span><span></span><span></span></span></td> </tr> <tr> <td>Min 11 / max 123</td> <td><input class="input-price" data-type="number" min="11" max="123"><span><span></span><span></span></span></td> </tr> <tr> <td>No decimal point</td> <td><input class="input-price" data-type="number" nopoint=""><span><span></span><span></span></span></td> </tr> </table>

Answer 2

type="number"仅适用于 HTML5 兼容浏览器。 溢出中已经有一个可用的答案，用于在此处使用 Javascript 后获得结果。