H5实现聚焦文本输入框不弹出输入法窗口（可通过扫描头录入） |
您所在的位置：网站首页 › js设置select不可编辑 › H5实现聚焦文本输入框不弹出输入法窗口（可通过扫描头录入） |
|
最近有这样一个需求：在扫码手持终端上打开H5页面，不需要进行任何操作，直接扫码后录入数据。 首先，需要通过定时器实现自动聚焦input输入框，这里我定义间隔200毫秒聚焦一次，input输入框在H5页面上，聚焦会自动弹出输入法键盘进行输入。可以将input设置为只读模式（readonly）将不会弹出输入框。 setInterval(function () { var input = document.getElementById('content'); input.setAttribute("readonly","readonly");//设置只读模式 input.focus(); }, 200)但是存在扫描条码录入不了的问题，可以通过以下这种方式来解决：只读模式下不会弹出输入法键盘，可以在只读模式下获取焦点后，再移除只读模式，就扫描条码录入数据（注意：移除只读模式设置20毫秒延迟）。 setInterval(function () { var input = document.getElementById('content'); input.setAttribute("readonly","readonly");//设置只读模式 input.focus(); setTimeout(() => { input.removeAttribute("readonly");//移除只读模式 }, 20); }, 200)以上方法解决了input聚焦弹出输入法的问题，但是定时器会一直执行，中间有可能执行到设置只读模式（readonly）时，扫描条码就又会出现录入不了的问题。解决这种小概率录入不了的问题可以在前面判断当前的input是否获取到焦点，实现方法如下： setInterval(function () { var input = document.getElementById('content'); if (input != document.activeElement) {//判断是否获取焦点 input.setAttribute("readonly","readonly");//设置只读模式 input.focus(); setTimeout(() => { input.removeAttribute("readonly");//移除只读模式 }, 20); } }, 200)录入数据后触发方法可浏览：扫码枪扫码后触发方法 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |