最近有一个前端需求:文本输入框,如果是键盘输入不做任何处理,遇回车键提交表单;当为扫码枪输入时,输入框只保留扫码枪输入的内容,其余全部清除,遇回车键提交表单;
一。扫码枪基本知识:
1,扫码枪输入过程与键盘输入过程是一模一样的,是一个字符一个字符地输入地,区别在于速度极快。
2,扫码枪一般不会输入非显示字符,除了回车键。
3,扫码枪一般设置最后会跟一个回车键。
二。需求情景分析:
1。当键盘输入部份字符后,再从最末扫码枪输入
2。当键盘输入部份字符后,再从所输入字符中间开始扫码枪输入
2。当键盘输入部份字符后,再从最开头扫码枪输入
三。JS关于键盘按键的基本知识:
1。当你按下键盘至松开称为一次按键,在此过程中可能会触发以下三个键盘事件:onkeydown:分别是当按键被按下(操作系统还没有处理输入流)
onkeypress:当按键被按下(操作系统已处理输入流,功能键或其他不可显示按键,不会触发此事件)
onkeyup:当按键被松开时触发。
2。当按下键盘时,操作系统会获得一个键盘码(keyCode)。键盘码不是ASCII码,只是键盘上每一个按键的编号。他没有大小写之分,也没有特殊符号与数字之分,小键盘上也没有数字键和控制键之分,都只有一个编号。
3。在onkeydown、onkeyup中你通过event.keyCode获得的是键盘码,在onkeypress中你通过event.keyCode获得的是ASCII码。
4。在event事件中会附带发送altKey,shiftKey,ctrlKey,即是否按下ALT,SHIFT,CTRL键。
四。典型的错误获得的思路:
1。在onkeydown中,获取keyCode及shiftKey,如果keyCode是大写,没有按下shiftKey,那说明CapsKey(就是大写键)被按下。错误在于,在onkeydown中keyCode是键盘码,并没有大小写的区分。
2。在onkeydown中,通过charCodeA函数获取unicode码,与上面一样的错误。
3。在onpress中,判断是不是大小写,你都已得到ASCII码的,还要判断大小写干啥?
五。本需求思路
1。本需求的实现不需要考虑CapLock、NumLock状态。
2。onkeydown判断按键keyCode是否等于13或108(小键盘回车),如果是则通过与上一次onkeydown的时间间隔来判断是不是扫码枪输入,如果是,则置当前输入框的内容为暂存的内容。
3。onkeypress通过与上一次onkeydown的时间间隔来判断是不是扫码枪输入,如果是,则取keyCode(此时为ASCII码),拼接到当前暂存的字符串,非显示字符不会触发本事件。
4。代码实现
var lastdate = 0;
var nowdate = 0;
var inputstr = '';
var key=0;
function keydown(obj)
{
nowdate = Date.now();
key = window.event.keyCode;//此时keyCode是键盘码
if(key==13 || key==108)//是回车键
{
if((nowdate-lastdate)<=30)//距上次按键间隔小于30毫秒,则为扫码枪输入
{
obj.value=inputstr;
}
inputstr ='';
lastdate = null;
}
}
function keypress()
{
key = window.event.keyCode;//此时keyCode是ASCII码
if(inputstr=='')
{
inputstr = String.fromCharCode(key);
}
else if(nowdate-lastdate<=30)//距上次按键间隔小于30毫秒,则为扫码枪输入
{
inputstr += String.fromCharCode(key);
lastdate = nowdate;
}
else
{
inputstr=\"\";
lastdate = 0;
}
}