javascript - HTML 文本框上的 Keydown 事件问题

Question

我有一个接受年份的字段，因此我创建了

input type="number" 

并实现了keydown事件来限制用户输入超过4位数字。

现在我面临一个问题，需要帮助来弄清楚逻辑。案例如下:

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

现在，如果您输入一个数字，它应该会替换数据，但由于我已禁止它，所以它不会。需要涵盖这个案例。

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

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

移动设备上也使用相同的形式，当用户选择文本框时，应该出现数字键盘。

编辑 1

在搜索选项时，我发现了 JSfiddle这可以引导我们走向正确的方向。 这里的问题还在于 input[type=number] 不支持 selection 属性。 Reference

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

Answer 1

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