html5 input禁止輸入的實(shí)現(xiàn)方法：1、通過readonly規(guī)定輸入字段為只讀可復(fù)制；2、通過disabled實(shí)現(xiàn)被禁用的input元素可復(fù)制，但不能接收焦點(diǎn)；3、通過控制input的max length為0實(shí)現(xiàn)；4、通過“οnfοcus="this.blur();"”實(shí)現(xiàn)不能輸入文本即可。

本教程操作環(huán)境：Windows10系統(tǒng)、HTML5版、DELL G3電腦

html5 input 禁止輸入怎么實(shí)現(xiàn)？

html中input禁止輸入(禁止獲得焦點(diǎn))多種方法及input限制數(shù)字和長度

input禁止輸入(禁止獲得焦點(diǎn))

1： readonly規(guī)定輸入字段為只讀可復(fù)制，但是，用戶可以使用Tab鍵切換到該字段，可選擇,可以接收焦點(diǎn)，還可以選中或拷貝其文本。

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

2：disabled 被禁用的 input 元素可復(fù)制，不能接收焦點(diǎn),設(shè)置后文字的顏色會(huì)變成灰色。無法與 <input type="hidden"> 一起使用。

<input type="text" value="可復(fù)制，不能接收焦點(diǎn)，字的顏色會(huì)變成灰" disabled="disabled">

3：通過控制input的max length為0實(shí)現(xiàn)

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

4：οnfοcus="this.blur();"onfocuse是聚焦的意思，當(dāng)你把光標(biāo)放在文本框上輸入的時(shí)候，就是聚焦，但這里添加了"this.blur()"，blur的作用就是去除聚焦，也就是你不能把光標(biāo)放在這個(gè)文本框上，換句話說就是你不能輸入文本了

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

input輸入數(shù)字和長度限制

1.type='number' 限制輸入為數(shù)字，oninput判斷限制長度（發(fā)現(xiàn)用了type='number'之后maxlength就不能用了）

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

2.用maxlength限制長度，oninput限制輸入框?yàn)榧償?shù)字

<input type="text" placeholder="請(qǐng)輸入您的手機(jī)號(hào)" oninput = "value=value.replace(/[^d]/g,'')" maxlength="11">

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

使用 onkeyup 事件，有 bug ，那就是在中文輸入法狀態(tài)下，輸入漢字之后直接回車，會(huì)直接輸入字母

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

使用 onchange 事件，在輸入內(nèi)容后，只有 input 喪失焦點(diǎn)時(shí)才會(huì)得到結(jié)果，并不能在輸入時(shí)就做出響應(yīng)

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

使用 oninput 事件，完美的解決了以上兩種問題，測(cè)試暫時(shí)還沒有出現(xiàn)其它問題。

推薦學(xué)習(xí)：《HTML視頻教程》