1. 程式人生 > 實用技巧 >手機端H5頁面在input輸入框獲得焦點時禁止喚起鍵盤

手機端H5頁面在input輸入框獲得焦點時禁止喚起鍵盤

一、平臺

手機移動端

二、實現的效果

當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上

如果還不能理解,就去看看原文作者的說法,我也是借花獻佛