一、平台
手机移动端
二、实现的效果
当input输入框获得焦点时,在保留光标的情况下,又不让手机虚拟键盘弹起
刚开始在网上找了一番,网上的回答大都自以为是,根本没有弄清诉求,他们提供的三种解决方法,把input框用div代替、给input框设readonly属性、input获得焦点时使其失去焦点,统统都达不到我想要这种效果
好在后来还是让我找到了一位志同道合的博友,他的处境和我几乎一样,而且他的解决办法也十分有效
这是他的原文地址:https://blog.csdn.net/DACBE/java/article/details/89343053
这么方便有效的办法,居然没被发扬光大,所以我在这里再稍微加点扩散影响力,让更多的同仁看到
以下套路,原作者是用VUE实现的,我这里就结合自己的需求,改了一个jquery的版本,代码不多,大家一看就懂
<input type="text" placeholder="输入文字试试" id="test" onfocus="stopKeyborad($(this))">
<script type="text/javascript" src="../../script/jquery.min.js"></script> <script type="text/javascript"> function stopKeyborad(obj) { obj.attr(‘readonly‘, ‘readonly‘); setTimeout(function() { obj.removeAttr(‘readonly‘); }, 200); } </script>
其实就是在短时间内完成了这几步--》1.在触发焦点事件时将input设为readonly,避免系统唤起虚拟键盘——》2.等待短暂的200毫秒后,再将input输入框的readonly去掉——》3.这时光标还会在input上
如果还不能理解,就去看看原文作者的说法,我也是借花献佛