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 事件,完美的解決了以上兩種問題,測試暫時還沒有出現其它問題。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章