解决扫码枪中文输入法冲突问题

  • Post author:
  • Post category:其他





解决扫码枪输入input时受中文输入法的影响,监听不到回车事件和在中文输入法时扫码错误的情况


首先先了解扫码枪的原理,每次扫码枪扫描相当于执行了 》》扫码的数字+ enter事件

由于搜狗输入法在键入英文时点击enter等于回显,故在输入框里面监听不到enter事件,而且还会出现一些其他的文字

解决方案:type=“password” 是不能输入中文的,故可以使用密码框实现扫码枪中文输入法的问题

<!DOCTYPE html>
<html lang="zh_CN">
<meta charset="utf-8">
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>lalalala</title>
</head>
<style>
    #show:after{
        content: "";
        display: inline-block;
        height: 18px;
        position: relative;
        border-right: solid 1px #666;
        top: 4px;
        left: 0px;
        opacity: 0;
    }
    .pad-input:focus + #show:after{
        animation: mymove 1.2s infinite;
    }

    @keyframes mymove
    {
        0%   {opacity: 0;}
        25%  {opacity: 0;}
        75%  {opacity: 1;}
        100% {opacity: 0;}
    }
</style>
<body>
<div style="position: relative;width: 200px;">
    <input type="password" autocomplete="off" class="pad-input" style="height: 30px;width: 100%;">
    <div id="show" style="position: absolute;left: 2px;top:50%;transform: translate(0,-50%);border: none;height: 28px;pointer-events: none;background: #fff;width: 98%;" disabled>
        <span></span>
    </div>
</div>
<script>
    var obj = {};
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj;
        },
        set: function (newValue) {
            document.getElementById('show').getElementsByTagName('span')[0].innerHTML  = newValue;
        }
    });
    document.getElementsByClassName("pad-input")[0].addEventListener('keyup', function (e) {
        obj.txt = e.target.value;
    });
</script>
</body>


效果展示


在这里插入图片描述

添加了模拟的光标效果,实现扫码枪在搜狗输入法中文时,监听不到回车事件和在中文输入法时扫码错误的情况


js拓展



1.js事件


例如最基本的,onbluer 获得焦点,onchenge 修改文本,onclick 鼠标点击事等等。

这类代码写到标签中,

,这里注意的是函数名的双引号。


2.dom的window操作


window.open(url,name,spers,replace);注意此处的四个人属性值都加双引号用逗号隔开。

url:打开的链接的地址。

name:打开方式有四种,默认为_blank 打开新窗口

_parent 打开到付及框架

_sele 代替自身的页面

_top 直接打开到顶级父级页面

spers:多用于调整高度

 以下的window操作写法可以将window换成对应的对象名:
window.close(); 关闭窗口
window.moveto(x,y); 调整打开窗口的位置
window.resize(x,y); 高宽    单位是像素


3.延迟与间隔


间隔 setInterval(“函数名”,间隔时间) 函数名需要添加双引号!! 时间是毫秒!

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由

setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
clearInterval(间隔的变量名);

间隔多用于没有用户操作的情况下

延迟
setTimeout("函数名",间隔时间)  双引号注意!!
 方法用于在指定的毫秒数后调用函数或计算表达式。 


4.操作html


查找元素:

根据id获取元素

document.getElementById(“id”);

根据class获取元素

document.getElementsByClassName(“class”);

根据标签名获取元素

document.getElementsByTagName(“div”);

根据name获取元素

document.getElementsByName(“name”);

注意添加引号!!


5.改变html内容


对象名.innerHTML;用于添加文本或者代码

添加文本 .innertext;


6.操作属性

此处注意添加双引号!!

1.设置一个属性,添加或更改

获取的对象.setAttribute(“属性名”,“属性值”)

2.获取属性的值

获取的对象.getAttribute(“属性名”);

3.移除一个属性

获取的对象.removeAttribute(“属性名”);


7.操作样式


1.操作样式

获取的 对象.style.样式=”” ; 样式中间的横杠去掉 且需要大写 例如

backgroundColor

2.获取样式

Var a = 获取的对象.style.样式


8.操作表单元素


对象名.value;



版权声明:本文为u013112461原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。