html `input type="number"`元素在默认情况下允许用户输入包括加号和减号在内的字符，其内置验证机制主要在表单提交时触发。若需实现输入过程中的实时、严格的数字验证，防止非数字字符（包括`+`和`-`）的输入，则必须借助javascript进行客户端控制，但需谨慎设计以避免损害用户体验。
在前端开发中，我们经常使用来收集用户输入的数字。然而，许多开发者会发现，即使指定了type="number"，用户仍然可以在输入框中键入+和-符号，甚至其他非数字字符，这常常与我们期望的“纯数字”输入行为不符。本文将深入探讨input type="number"的默认行为，并提供使用JavaScript实现严格实时验证的策略。
input type="number"的默认行为解析
HTML5引入的input type="number"旨在为数字输入提供语义化的支持和一些浏览器内置功能，例如：
- 数字键盘提示： 在移动设备上，它通常会触发数字键盘。
- 步进器（Spin Buttons）： 某些浏览器会显示上下箭头，允许用户通过点击增加或减少数值。
- 内置验证： 当表单提交时，浏览器会检查输入值是否为有效的数字。
关于+和-符号，它们是标准数字表示法的一部分。例如，+100表示正一百，-50表示负五十。即使是科学计数法，如1e+2也包含+。因此，浏览器允许这些符号的输入是符合其对“数字”广义理解的。
关键点在于： input type="number"的内置验证主要发生在表单提交时。如果在输入框中键入100+、200-或abc等非纯数字内容，并尝试提交表单，浏览器会阻止提交并显示一个提示信息（例如：“请输入一个数字”），要求用户更正输入。
立即学习“前端免费学习笔记（深入）”；
示例：input type="number"的默认验证
<form onsubmit="alert('表单已提交！'); return true;">
<label for="quantity">数量:</label>
<input type="number" id="quantity" name="quantity" required>
<button type="submit">提交订单</button>
</form>当用户在上述输入框中输入100-或abc并点击“提交订单”时，浏览器会拦截提交并提示输入错误，要求输入一个有效数字。这种行为是HTML5内置验证机制的一部分，旨在提高数据质量。
实时验证的需求与挑战
尽管浏览器提供了提交时的验证，但在许多场景下，我们希望实现更严格的、实时的验证，即在用户键入字符的当下就阻止或移除不符合规则的字符，确保输入框中始终只有纯粹的数字。这种需求通常是为了：
- 提升用户体验，即时反馈输入错误。
- 减少无效输入，降低服务器端验证压力。
- 确保输入框内容的格式一致性。
实现实时验证的挑战在于，需要细致地处理各种用户输入行为，包括键盘输入、粘贴操作、以及不同控制键（如退格、方向键）的影响，同时避免过度干扰用户正常的输入流程。
使用JavaScript实现实时数字验证
要实现输入过程中严格的数字验证，防止+、-或其他非数字字符的输入，我们必须借助JavaScript。以下是几种常见的实现策略：
策略一：使用 oninput 事件进行字符过滤
oninput事件在input元素的值发生变化时立即触发，无论是通过键盘输入、粘贴还是其他方式。这是实现实时过滤最常用且相对简单的方法。
示例1：只允许纯数字（0-9）
如果你的需求是只允许0-9的纯数字，不允许负数、小数、+、-等，可以使用以下代码：
<label for="pureNumberInput">纯数字输入 (0-9):</label> <input type="text" id="pureNumberInput" oninput="this.value = this.value.replace(/[^0-9]/g, '');" inputmode="numeric" pattern="[0-9]*">
解释：
- type="text"：为了获得最大的控制权，我们通常会将type="number"改为type="text"。type="number"虽然有内置验证，但在不同浏览器上的行为可能不一致，且对输入字符的限制不够灵活。
- oninput="this.value = this.value.replace(/[^0-9]/g, '');"：这是一个核心片段。
- /[^0-9]/g 是一个正则表达式，[^0-9]匹配任何非数字字符，g表示全局匹配。
- replace(/[^0-9]/g, '')会将输入框中所有非数字字符替换为空字符串，从而达到实时过滤的效果。
- inputmode="numeric" 和 pattern="[0-9]*"：这两个属性可以帮助在移动设备上提示弹出数字键盘，即使type="text"也能提供类似type="number"的用户体验。
示例2：允许负数和一位小数
如果需要允许负数和一位小数点，正则表达式会更复杂：
<label for="decimalNumberInput">允许负数和小数:</label>
<input type="text" id="decimalNumberInput" oninput="validateDecimalNumber(this)" inputmode="decimal" pattern="-?\d*\.?\d*">
<script>
function validateDecimalNumber(input) {
let value = input.value;
// 1. 移除所有非数字、非小数点、非负号的字符
value = value.replace(/[^\d.-]/g, '');
// 2. 确保负号只在开头出现一次
const negativeMatch = value.match(/^-/);
value = value.replace(/-/g, ''); // 移除所有负号
if (negativeMatch) {
value = '-' + value;
}
// 3. 确保小数点只出现一次
const parts = value.split('.');
if (parts.length > 2) {
value = parts[0] + '.' + parts.slice(1).join(''); // 只保留第一个小数点
}
input.value = value;
}
</script>解释： 这个函数分步处理，首先移除所有不相关字符，然后确保负号和小数点只出现一次且位置正确。这种方法更健壮，但逻辑也更复杂。
策略二：使用 onkeydown 事件阻止非法字符
onkeydown事件在用户按下键盘上的键时触发。通过监听此事件，我们可以在字符被输入到输入框之前就阻止它。这种方法可以提供更即时的反馈，因为非法字符根本不会出现在输入框中。
<label for="keydownNumberInput">阻止非数字输入 (onkeydown):</label>
<input type="text" id="keydownNumberInput" onkeydown="return handleNumberKeydown(event)" inputmode="numeric" pattern="[0-9]*">
<script>
function handleNumberKeydown(event) {
const charCode = event.which ? event.which : event.keyCode;
// 允许数字键 (0-9)
if ((charCode >= 48 && charCode <= 57) || (charCode >= 96 && charCode <= 105)) {
return true;
}
// 允许控制键：Backspace(8), Tab(9), Enter(13), Delete(46), Arrow keys(37,39), Home(36), End(35)
if ([8, 9, 13, 46, 37, 39, 36, 35].includes(charCode)) {
return true;
}
// 如果需要允许小数点 (190 或 110)
if (charCode === 190 || charCode === 110) {
// 确保输入框中没有小数点，且当前光标位置允许输入小数点
if (event.target.value.includes('.')) {
return false; // 已经有小数点，阻止再次输入
}
return true;
}
// 如果需要允许负号 (189 或 109)
if (charCode === 189 || charCode === 109) {
// 确保负号只在开头，且当前输入框没有负号
if (event.target.value.length > 0 && event.target.value.charAt(0) === '-') {
return false; // 已经有负号，阻止再次输入
}
if (event.target.selectionStart !== 0 && event.target.value.length > 0) {
return false; // 不在开头位置，阻止输入负号
}
return true;
}
// 阻止其他所有字符
return false;
}
</script>解释： onkeydown事件处理需要考虑更多细节，例如允许用户使用退格键、删除键、方向键等控制键。上述代码通过检查charCode来判断按下的键是否为允许的数字或控制键。对于小数点和负号，还需要额外的逻辑来确保其只出现一次且位置正确。
策略三：处理粘贴事件 (onpaste)
用户不仅可能手动输入，还可能通过粘贴操作引入非法字符。因此，监听onpaste事件并对粘贴内容进行清理是必不可少的。
<label for="pasteNumberInput">处理粘贴:</label>
<input type="text" id="pasteNumberInput" onpaste="handlePasteNumber(event)" inputmode="numeric" pattern="[0-9]*">
<script>
function handlePasteNumber(event) {
// 获取粘贴板中的文本
const pastedText = (event.clipboardData || window.clipboardData).getData('text');
// 假设我们只允许纯数字，过滤掉所有非数字字符
const cleanedText = pastedText.replace(/[^0-9]/g, '');
// 将清理后的文本插入到输入框当前光标位置
document.execCommand('insertText', false, cleanedText);
// 阻止默认的粘贴行为，因为我们已经手动处理了
event.preventDefault();
}
</script>解释： `event.clipboardData.
