本文首發於我的部落格：工作中遇到如下需求，點選輸入框彈出自定義彈窗，輸入框是input標籤：
但是在移動端，input會預設觸發手機的虛擬鍵盤，如何阻止手機虛擬鍵盤彈起呢？目前我試過有兩個方案，乙個是給input新增readonly屬性,另乙個就是在input事件處理方法前面新增一句document.activeelement.blur()。
使用readonly方式來阻止虛擬鍵盤彈出應該是最簡單最優雅的方式了。readonly 屬性規定輸入欄位為唯讀。唯讀欄位是不能修改的。不過，使用者仍然可以使用 tab 鍵切換到該字段，還可以選中或拷貝其文字。
值得一提的是它的取值，只要宣告了readonly屬性，不管取什麼值都可以，比如readonly=""、readonly="readonly"、readonly="abc"都是一樣的
優點：簡單
這是個什麼玩意兒？document.activeelement是乙個web api介面。mdn上的解釋是：它返回當前頁面中獲得焦點的元素，也就是說，如果此時使用者按下了鍵盤上某個鍵，會在該元素上觸發鍵盤事件，該屬性是唯讀的。
document.activeelement屬性始終會引用dom中當前獲得了焦點的元素。元素獲得焦點的方式有使用者輸入(通常是按tab鍵)、在**中呼叫focus()方法和頁面載入。
它裡面有很多方法，在瀏覽器控制台檢視，可以看到有很都方法：
mdn上還展示了乙個有意思的示例，看這裡
那麼document.activeelement.blur()為什麼可以阻止虛擬鍵盤彈出呢？原因是：當你點選input的時候，document.activeelement獲得了dom中被聚焦的元素，也就是你點選的input，而呼叫.blur()方法，blur我相信大家都知道吧，就是取消聚焦。獲得被聚焦的元素然後強制blur以達到沒有聚焦的樣子、、、感覺繞了。
優點：支援android、ios
缺點：需要新增額外的js**
這句**加在什麼地方？加入有如下html
$("#datepicker").focus(function());document.activeelement.blur()確實是在繞彎子，直接使用readonly是最佳方案。但是document.activeelement很強大，可以做很多事。 h5適配手機
1 使用meta標籤，這也是普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 content中的 width 這個width指的是什麼寬度，我看過的文章對這個都沒有解釋的很清楚，有幾個...
H5禁止頁面滑動 滾動
禁止頁面滾動 有三種方法 1，依靠css 將頁面 document.documentelement.style.overflow hidden document.body.style.overflow hidden 手機版設定這個。如果設定了如上，頁面的滾動條將會消失，此時滑鼠滾輪失效。但是 你用鍵...
h5頁面禁止複製 H5移動端頁面禁止複製技巧
前言 業務需要，需要對整個頁面禁止彈出複製選單。在禁止的頁面中加入以下css樣式定義 webkit touch callout none 系統預設選單被禁用 webkit user select none webkit瀏覽器 khtml user select none 早起瀏覽器 moz user...