JS判断是键盘输入还是扫码枪输入

文章讲述了如何处理前端一个特定需求,即在文本输入框中,键盘输入时不处理,但扫码枪输入时会清除已有内容并遇回车键提交表单。文中分析了扫码枪输入的特点和键盘事件的差异,并提供了利用按键时间间隔来区分扫码枪与键盘输入的解决方案。
摘要由CSDN通过智能技术生成

最近有一个前端需求:文本输入框,如果是键盘输入不做任何处理,遇回车键提交表单;当为扫码枪输入时,输入框只保留扫码枪输入的内容,其余全部清除,遇回车键提交表单;

一。扫码枪基本知识:

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;

}

}

### 回答1: 使用JavaScript编写扫码输入数据累加的代码非常简单。我们可以通过监听输入事件来获取扫码输入数据,并在每次输入时将数据累加到一起。 首先,需要在HTML文件中创建一个文本框和一个显示累加结果的元素,如下所示: ```html <input type="text" id="input" /> <p id="result"></p> ``` 然后,在JavaScript代码中获取输入框和结果显示元素的引用,并添加一个输入事件监听器: ```javascript const input = document.getElementById('input'); const result = document.getElementById('result'); let sum = 0; input.addEventListener('input', function(event) { const value = parseInt(event.target.value); if (!isNaN(value)) { sum += value; result.textContent = '累加结果:' + sum; } }); ``` 这段代码首先定义了一个变量`sum`来保存累加结果的值,并设置初始值为0。然后,使用`addEventListener`方法添加了一个输入事件监听器,在每次输入事件发生时调用匿名函数。 在匿名函数中,首先通过`event.target.value`获取输入的值,并使用`parseInt`将其转换为整数类型。然后,检查转换后的值是否为有效的数字,若是,将其累加到`sum`中,并更新结果显示元素的文本内容。 最后,将JavaScript代码放置在HTML文件的`<script></script>`标签中,或者将其保存为一个单独的`.js`文件并通过`<script src="script.js"></script>`的方式引入。 这样,当用户使用扫码输入数据时,累加结果会实时显示在页面上。 ### 回答2: 在JavaScript中,可以通过监听扫码输入事件来获取扫码输入的数据,并进行累加操作。下面是一个简单的示例代码: ```javascript // 假设页面上有一个用于显示累加结果的文本框 var resultInput = document.getElementById('result'); // 初始化累加结果为0 var sum = 0; // 监听扫码输入事件 document.addEventListener('keydown', function(event) { // 获取键盘按下的字符 var char = String.fromCharCode(event.keyCode); // 判断是否为数字 if (/^\d$/.test(char)) { // 将输入的数字累加到结果上 sum += parseInt(char); // 更新文本框的值 resultInput.value = sum; } }); ``` 在上述代码中,我们通过addEventListener方法监听了keydown事件,当有键盘按键被按下时触发该事件。然后判断按下的键是否为数字,并将数字累加到sum变量中。最后更新显示累加结果的文本框的值。 这样,当你使用扫码输入数字时,脚本会将输入的数字累加起来,并实时更新在页面上。 ### 回答3: 使用JavaScript编写代码来实现扫码输入数据的累加非常简单。下面是一个示例代码: ```javascript // 初始化累加器 let sum = 0; // 监听扫码输入事件 document.addEventListener('keydown', function(event) { // 检查输入的键值是否为数字键 if (event.key >= '0' && event.key <= '9') { // 将输入的数字转换为整数,并累加到总和上 sum += parseInt(event.key); } }); // 输出累加结果 console.log('当前累加结果为:', sum); ``` 上述代码通过使用`document`对象的`addEventListener`方法来监听键盘按下事件,然后检查输入的键值是否为数字键。如果是数字键,则将输入的数字转换为整数,并累加到`sum`变量上。最后,通过`console.log`方法输出累加结果。 你可以将上述代码放在HTML文件中的`<script>`标签内,并在浏览器中运行该文件。然后,当你使用扫码扫描条形码时,输入的数字将被累加到`sum`变量上,并在控制台上显示累加结果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值