嘮一嘮前端的坑 之 input框無法輸入內容的幾種情況

1,input框設置了readonly屬性

<input type="text" name="name" value="123" readonly="readonly" />

readonly 屬性規定輸入字段爲只讀,不可以修改但是可以複製。

2,input框自身設置font-size爲0

<input type="text"  style="font-size: 0px;width: 100px;height:30px;" /> 

這種情況比較少見,但是有些時候,爲了消除span元素之間的間隔會讓font-size爲0,此時input框應該是內容區爲0*0個像素,如果強行設置input寬高,這時就算input框顯示了,因爲font-size爲零,就啥也輸不進去。

3,input框被其他元素擋住

<div style="width: 200px;height: 200px;float: left;position: absolute;z-index: 100;">
</div>
<input type="text" style="position: absolute;z-index: 10;" />

這種情況大致是因爲浮動和z-index引起的,它的特點是即使點擊input元素也不會出現選中狀態,只要認真排查一下html的結構合不合理,就可以找到問題。

4,設置了用戶不可選中文本,usr-select:none;


*{margin:0;padding:0;user-select: none;-ms-user-select: none;-moz-user-select: none;-webkit-user-select: none;}

可能會因爲瀏覽器的一些適配問題,導致你設置的user-select:none;影響到了input框的正常事件

5,return false;的使用清除了input框的默認事件

我們知道使用stopPropagation(); 可以阻止默認的冒泡事件,使用preventDefault();可以消除默認事件,但是在使用中貪圖方便直接用return false;來代替以上兩種方法,阻止默認事件用reutrn false,但是在jquery中,reutrn false;既阻止了冒泡,又消除了默認事件,如果不清楚這一點很有可能在使用on綁定事件時,使用reutrn false;消除冒泡的時候也消除了默認事件,導致input框無法輸入內容。

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