html中的input文本框禁止輸入問題

html中的input文本框禁止輸入問題

    我們在進行前端頁面開發時，經常會遇到輸入框禁止輸入的問題，html中提供了三種方式來解決，readonly、disabled、autocomplete。嚴格地講前兩種纔是禁止用戶輸入，而autocomplete只是默認清除用戶的輸入記錄。

readonly：顧名思義，表示該輸入域的值只能read，不能write，他僅僅只能與 type="text" 配合使用，可複製，可選擇，可以接收焦點，後臺會接收到傳值。

<input type="text" name="www.xxx" readonly="readonly" /> 

disabled：表示禁用input元素，不可編輯，不可複製，不可選擇，不能接收焦點，後臺也不會接收到傳值，頁面顯示也會變成置灰狀態。

<input type="text" name="www.xxx.com" disabled="disabled" /> 

autocomplete：瀏覽器通常會記錄input輸入框的記錄，所以在輸入的時候，經常會下拉很多內容，使用autocomplete能夠清除用戶的輸入記錄，在每次重新請求頁面時，記錄都會清空。

<input type="text" autocomplete="off" id="number"/> 

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="去除聚焦，不能輸入文本" οnfοcus="this.blur();">

input輸入數字和長度限制

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

<input class="inputs" type="number" value="只輸入數字，長度11位" οninput="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 事件，完美的解決了以上兩種問題，測試暫時還沒有出現其它問題。