HTML文本框上的Keydown事件问题 [英] Keydown event issue on HTML textbox
问题描述
我有一个接受年份的字段,所以我创建了
I have a field that accepts the year, so I have created
input type="number"
并实施 keydown事件以限制用户输入超过4位数字。
and implemented keydown event to restrict user to enter more than 4 digits.
现在我遇到了一个问题,需要帮助来弄清楚逻辑。以下是这种情况:
Now I'm facing an issue and need help in figuring out the logic. Following is the case:
- 在文本框中输入4位数
- 使用SHIFT +选择输入的文本箭头键
现在,如果你键入一个数字,它应该替换数据,但由于我已禁止它,它不会。需要覆盖这种情况。
Now if you type a number it should replace the data but since I have barred it, it will not. Need to cover this case.
还可以在以下 JSFiddle中找到代码。
我在输入[type = number]
上也有很多css和验证,所以无法更改为输入[type = text]
。
I also have lot of css and validation on input[type=number]
, so cannot change to input[type=text]
.
此外,在移动设备上使用相同的表单,当用户使用时选择文本框,应该出现数字键盘。
Also same form is used on mobile devices, and when user selects textbox, numeric keyboard should appear.
搜索选项时,我发现 JSfiddle 可以指导我们走向正确的方向。
此处的问题还是输入[type = number]
不支持选择属性。 参考
while searching for option, I found a JSfiddle that could direct us to right direction.
Issue here also is input[type=number]
does not support selection property. Reference
作为替代方案,我们决定转移到输入[type = tel]
。这将以类似的方式工作,但将允许我们使用maxLength属性。如果有人有更好的方法,请分享。
As an alternative, we have decided to move to input[type=tel]
. This would work in similar fashion, but will allow us to use maxLength attribute. Still if anyone has a better way, please share.
推荐答案
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);
});
这篇关于HTML文本框上的Keydown事件问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!