zoukankan      html  css  js  c++  java
  • 移动端 扫描枪输入不弹出键盘

    目前有一个需求,用户可以手写输入 也可以 扫描枪输入,使用安卓的一个机器,进行扫描二维码 读取内容 并查找展示

    扫描枪原理:模拟移动端输入键盘,从而将获取的内容赋值在获取焦点的input上  (扫到东西的话会自动在焦点处输出)

    因为是模拟输入键盘 实际上 扫描枪输入完成以后,会自动吊起移动端小键盘,现在就如何在扫描的时候 不掉起小键盘 ,只进行赋值。

    解决方法:

    1.利用input readonly属性

    试验了一下,当input有readonly属性的时候,即使获取焦点,也不会吊起小键盘 

    利用这个特性,在获取到内容以后,给input添加readonly属性,使得小键盘不出现,进行操作以后 再讲属性移除,这样既获取了焦点,又没有吊起小键盘,之后还可以进行扫码操作

     if($(this).val().trim().length>0){
                    获取到内容以后,给input添加readonly属性
                    input.attr('readonly',true)
                    
                    time1=setTimeout(function() {
                        $.ajax({
                        type: "POST",
                        url: "/yili/signin/byqrcode",
                    
                        beforeSend:function(){
                            clearTimeout(time1);
                           
                        },
                        data: “”,
                        success: function (data) {
                          
    
    
                        },
                        complete: function () {
                         查询结束后,给input移除readonly属性,此时焦点依然在Input上,可以直接进行下一次操作
                            input.attr('readonly',false)
                        },
                        error: function () {
                        console.log("提交失败!");
                        }
                    });
                    }, 1000)
                }                                
    

    其他普及:

    扫码枪输入的间隔大概在15-60毫秒,然后手动输入的100-200毫秒之间

    input输入事件,包括 keydown 键盘(刚刚)按下,keypress 键盘(已经)按下,keyup 键盘抬起,

    keydown,在按键刚刚被按下,但值还没有写入input

    keypress   已经按下并且值已经输入到文本框

    keyup       就是键盘弹起  可以利用keyup来判断input输入的内容,因为已经是输入完成

    初始化获取焦点 而又不掉起键盘  可以为input添加  autofocus 属性 ,页面初始化的时候执行 ,只执行一次

  • 相关阅读:
    Java基础学习(五) String类
    Java基础学习(四) java8线程
    Java基础学习(三) IO
    Java基础学习(二) 集合
    Java基础学习(一) 基本数据类型和引用数据类型
    枚举类常见漏洞解决
    数据校验
    postman如何传递token进行接口测试
    Spring Cloud-OpenFegin
    SpringCloud-Eureka
  • 原文地址:https://www.cnblogs.com/GoTing/p/11912086.html
Copyright © 2011-2022 走看看