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="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 事件，完美的解決了以上兩種問題，測試暫時還沒有出現其它問題。
推薦學習：《HTML影片教學》
以上是html5 input 禁止輸入怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
