移動端禁止手機自帶鍵盤彈出

這個問題，確實困擾了我好久，但是今天解決了。在網上搜索答案，全都是用DIV模擬input框實現，沒有一個真正解決這個問題的，現在我只需要一句代碼就可以完完整整的解決這個問題。

先看下問題吧：

這個是我自制的一個日歷，在沒有選擇日期前她是這個樣子的，感覺還可以吧

 

但是好景不長，當我將手放進選擇框選日期的時候，手機自帶的鍵盤就彈出來了，完全蓋住的頁面，好心塞，有么有？

 

 

解決方案：

HTML代碼

    <div class="calendar">
        <div>
            <input type="text" id="datePicker" class="date_picker" placeholder="點擊選擇入住日期"/>
        </div>
        <div>
            <input type="text" id="datePicker2" class="date_picker" placeholder="點擊選擇離開日期"/>
        </div>
    </div>

JS代碼

$("#datePicker").focus(function(){
        document.activeElement.blur();
    });
$("#datePicker2").focus(function(){
        document.activeElement.blur();
    });

 

接下來見證奇跡的時刻到了，手機自帶的鍵盤，奇跡就不見了。 
看下面效果圖，6不6，你就說！什么div模擬input方法，你試試就知道………….我就只呵呵了……

 

 

轉:  https://blog.csdn.net/qq_24147051/article/details/52958610