Question

我有一个接受年份的字段，所以我创建了

input type="number"

并实施 keydown事件以限制用户输入超过4位数字。

现在我面临一个问题，需要帮助来弄清楚逻辑。以下是这种情况：

在文本框中输入4位数字
使用SHIFT +箭头键选择输入的文本

现在，如果你键入一个数字，它应该替换数据但是因为我禁止它，所以它不会。需要涵盖这种情况。

还可以在以下JSFiddle中找到代码。

我在input[type=number]上也有很多css和验证，因此无法更改为input[type=text]。

在移动设备上也使用相同的表单，当用户选择文本框时，应显示数字键盘。

编辑1

在搜索选项时，我发现JSfiddle可以指引我们朝正确的方向发展。此处的问题还有input[type=number]不支持选择属性。 Reference

作为替代方案，我们决定转移到input[type=tel]。这将以类似的方式工作，但将允许我们使用maxLength属性。如果有人有更好的方法，请分享。

Answer 1

可能会有效，您可以使用Regular Express仅验证号码和

^[0-9\.\-\/]+$

你也可以使用 .length 方法确保你有特定的长度

Answer 2

在这种情况下，您无法提交无效值：

＆＃13;

<form>
  <input type=number min=0 max=9999 required />
  <input type=submit value=Submit />
</form>

＆＃13;

Answer 3

HTML：

<input type="tel" class="year" maxlength="4" data-temp="">

jQuery的：

$(document).on('input', '.year', function(){
    var txt = $(this).val();
    if(isNaN(txt) || txt > 9999){
        $(this).val( $(this).data('temp') );
        return;
    }
    $(this).data('temp', txt);
});

JSFiddle

Answer 4

所以我已将代码移至input[type=tel]和Updated JSFiddle

如果您检查，我添加了2个活动

Keydown限制输入任何无效密钥。
模糊事件以检查输入的值是否仅为数字。

现在您可能会想，如果我已经限制用户只输入数字，他怎么能输入错误的值。

解释

在我的实现中，我使用了keydown并使用了keycode，我允许/阻止。有趣的情况是当用户按住并保持shift键时。现在在keydown上，我得到相同的键码，但值不同（一个特殊字符）。所以检查模糊的完整性。

更好的方法是将keypress和keydown一起处理，我会更新小提琴并更新我的答案，但是现在我想这已经解决了我的问题。

感谢大家的所有意见/回答。如果有更好的实施方法，也请告诉我。

HTML文本框上的Keydown事件问题

编辑1

4 个答案:

解释