html5 input 禁止輸入怎麼實現

html5 input禁止輸入的實現方法：1、通過readonly規定輸入欄位為唯讀可複製；2、通過disabled實現被禁用的input元素可複製，但不能接收焦點；3、通過控制input的max length為0實現；4、通過「οnfοcus="this.blur();"」實現不能輸入文字即可。

本教學操作環境：Windows10系統、HTML5版、DELL G3電腦

html5 input 禁止輸入怎麼實現？

html中input禁止輸入(禁止獲得焦點)多種方法及input限制數位和長度

input禁止輸入(禁止獲得焦點)

1： readonly規定輸入欄位為唯讀可複製，但是，使用者可以使用Tab鍵切換到該欄位，可選擇,可以接收焦點，還可以選中或拷貝其文字。

<input type="text" value="禁止輸入，可以使用Tab鍵切換到該欄位" readonly="readonly">

2：disabled 被禁用的 input 元素可複製，不能接收焦點,設定後文字的顏色會變成灰色。無法與 <input type="hidden"> 一起使用。

<input type="text" value="可複製，不能接收焦點，字的顏色會變成灰" disabled="disabled">

3：通過控制input的max length為0實現

<input type="text"  maxlength="0">

4：οnfοcus="this.blur();"onfocuse是聚焦的意思，當你把遊標放在文字方塊上輸入的時候，就是聚焦，但這裡新增了"this.blur()"，blur的作用就是去除聚焦，也就是你不能把遊標放在這個文字方塊上，換句話說就是你不能輸入文字了

<input type="text" value="去除聚焦，不能輸入文字" onfocus="this.blur();">

input輸入數位和長度限制

1.type='number' 限制輸入為數位，oninput判斷限制長度（發現用了type='number'之後maxlength就不能用了）

<input class="inputs" type="number" value="只輸入數位，長度11位" oninput="if(value.length>11)value=value.slice(0,11)"  />

2.用maxlength限制長度，oninput限制輸入框為純數位

<input type="text" placeholder="請輸入您的手機號" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="11">

a、onkeyup = "value=value.replace(/[^\d]/g,'')"

使用 onkeyup 事件，有 bug ，那就是在中文輸入法狀態下，輸入漢字之後直接回車，會直接輸入字母

b、onchange = "value=value.replace(/[^\d]/g,'')"

使用 onchange 事件，在輸入內容後，只有 input 喪失焦點時才會得到結果，並不能在輸入時就做出響應

c、oninput = "value=value.replace(/[^\d]/g,'')"

使用 oninput 事件，完美的解決了以上兩種問題，測試暫時還沒有出現其它問題。

推薦學習：《》

以上就是html5 input 禁止輸入怎麼實現的詳細內容，更多請關注TW511.COM其它相關文章！