HTML 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>

<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]*">

<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>

<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>

<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>