Question

使用下面看到的文本框剃刀类型我可以将maxlength设置为4，但是当我尝试将类型设置为数字时，我仍然可以输入字符，它还允许超过4个字符，数字仍然限制为4.我试过

pattern = "\\d*"

也允许角色。不适用于Chrome和IE

@Html.TextBox("smsCode", null, new { @class = "form-control", maxlength="4", type="number" })

Answer 1

@Html.TextBox生成<input>元素，并且当输入元素设置为maxlength时，根据MDN documentation <input type="number">属性将被忽略。

如果类型属性的值为text，email，search，password， tel或url，此属性指定最大字符数（在Unicode代码点中）用户可以输入; 用于其他控制类型，它被忽略。

因此，您需要一些解决方法来实现最大长度的数字输入：

1）从type="number" / TextBox帮助中删除TextBoxFor属性，并确保文本框中包含id。

@Html.TextBox("smsCode", null, new { @class = "form-control", maxlength="4", id="smsCode" })

2）使用keydown DOM事件来阻止除文本框之外的任何其他输入而不是数值和特殊键（例如，使用jQuery，基于 @ SpYk3HH 的答案here）。

$("#smsCode").keydown(function (e) {
    // Allow some keys: backspace, delete, tab, escape, enter etc.
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
        // Allow select all
        (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || 
             // Allow home, end, left, right, down & up keys
            (e.keyCode >= 35 && e.keyCode <= 40)) {
                 return;
        }

        // Ensure the input has numeric values
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
});

然后，检查生成的文本框是否只接受数值。

工作示例：DotNET Fiddle

剃刀文本框类型不起作用

1 个答案: