Javascript HTML文本框上的Keydown事件问题

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

input type="number" 

并执行了按键事件，以限制用户输入超过4位数字

现在我面临着一个问题，需要帮助我弄清其中的逻辑。情况如下：

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

现在，如果您键入一个数字，它应该替换数据，但由于我已禁止它，它不会。我们需要处理这个案子

也可以在下面找到代码

我在

input[type=number]

上也有很多css和验证，因此无法更改为

input[type=text]

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

编辑1 在寻找选择的过程中，我找到了一个可以指引我们正确方向的方法。 这里的问题也是

输入[type=number]

不支持选择属性

---

作为替代方案，我们决定转到

input[type=tel]

。这将以类似的方式工作，但允许我们使用maxLength属性。不过，如果有人有更好的方法，请与我们分享。

这可能有效，您可以使用常规Express仅验证数字和数字

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

---

您还可以使用.length方法来确保您具有特定的长度在这种情况下，您不能提交无效值：

HTML：

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

---

所以我把代码移到了

input[type=tel]

和

如果你检查，我已经添加了2个事件

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

现在你们可能会想，若我已经限制用户只输入数字，那个么他怎么能输入不正确的值呢

解释 在我的实现中，我使用了keydown和keycode，我允许/阻止。有趣的例子是当用户按住shift键时。现在在keydown上，我得到相同的keycode，但值不同（一个特殊字符）。检查模糊的完整性

更好的方法是同时处理按键和按键，我会更新fiddle和我的答案，但现在我想这已经解决了我的问题

---

谢谢大家的评论/回答。另外，如果有更好的实现方法，请告知我。

MaxLength属性不适用于输入[type=number]请将相关代码放入您的问题中。您引用的问题看起来与您的问题重复。@RespectMyAuthoritah如果重复，我很抱歉。我试着搜索，但我想我的搜索不够好。你能分享一下这个链接吗？ThanksAlso@RGraham我添加了一个JSFIDLE链接的参考。若用户选择数据并输入新数据，则会将其替换，以便长度不会超过。我想允许这样做，但不知道怎么做？@Rajesh：如果你愿意，你可以只使用键入文本。如果我使用键入文本，当我在手机中打开时，它将打开qwerty键盘，而不是数字键盘。是的，它不会。但它允许用户输入任意数量的文本，这是我不想要的。@Rajesh，不。如果浏览器支持验证，它不会将无效值传递给脚本-您将得到未定义或空字符串。如果您不确定brouser是否支持数字输入，您可以添加

maxlength=4

属性-文本输入长期支持该属性，但在数字输入时忽略该属性。除了maxlength，您在哪里还需要jQuery代码？是否有任何浏览器支持

type=number

，但不支持

min

和

max

？这是一种不好的方法，因为当您指定一个旧值时，您会将光标移到输入的末尾，而不管它以前在哪里。@Qwertiy-min和max受支持，但它们不会限制用户输入超出范围的值。正如我所提到的，我将去掉最后一个数字，而不会恢复到以前的值。这是一种错误的方式，我会移动光标。如果它保持它的位置是合乎逻辑的。对maxlength没有异议。关于brouser支持：我问是否有浏览器同时支持NUMBER和不支持MIN/MAX。您只写了关于最小/最大支持的内容。@Rajesh，值的任何更改都会移动光标，所以最好在

blur

上执行这些操作？

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