移动端input文本框默认的焦点行为会弹起软键盘输入法,如果直接设置readonly则聚焦不了,因为需要多次聚焦,每次都弹出键盘又影响用户体验机页面美观

      最近遇到一个问题,就是h5移动端,input文本框聚焦会弹出输入法,而我需要外接称重设备,称重设备会把重量回传到屏幕的光标处,也就是说我这个input框需要一直聚焦,无论用户点哪里最后还要聚焦到这个文本框,重量回传后,用户可能要手动修改,我这里用html写了个小键盘,方便用户输入及修改用户填完重量选择运输方式后继续称重,所以就需要光标始终在这个框内.

       所以我是这样做的,给文本框加上autofocus 属性,这样页面加载中会聚焦到此文本框.且不会弹出软键盘.

       但是后续重新聚焦会弹起软键盘,所以我们需要对该元素的会弹起键盘的时间进一步处理,先处理该元素的获取到焦点的的事件,获取焦点时立刻设置成只读状态,延迟200毫秒后移除只读属性,这时候你会发现光标还是会在文本框内,不过不会弹出输入法;我这里是需要无论客户怎么操作焦点都会在文本框内,所以对失去焦点做了处理,元素失去焦点后500毫秒后重新获取焦点.需要注意的是元素的点击事件也会触发弹起软键盘,所以我们还得对点击事件做处理,我这里的处理方法是点击元素直接使元素失去焦点,由失去焦点事件处理500好毫秒重新聚焦. (注意长按文本框也回弹起软键盘,也得进一步处理)如果你们有更好的方法欢迎评论.

$(function(){

$("#WEIGHT").focus(function () {//处理聚焦事件

var obj = $(this);

obj.prop("readonly","readonly");//元素设置成只读 这样就不会弹起软键盘了

setTimeout(function(){/100毫秒后解除只读属性

obj.removeAttr("readonly")/

},100)

}).blur(function () {//处理失焦事件

var obj = $(this);

setTimeout(function(){//500毫秒后重新聚焦

obj.focus();

},500);

}).on("click",function(){//这里点击事件也会弹起软键盘,也处理一下

$(this).blur();//点击后立即失去焦点,有失去焦点事件处理

})

})

文章链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。