手機端H5頁面在input輸入框獲得焦點時禁止喚起鍵盤
阿新 • • 發佈:2020-07-15
一、平臺
手機移動端
二、實現的效果
當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上
如果還不能理解,就去看看原文作者的說法,我也是借花獻佛