input 無法輸入內容的幾種原因


1、設置 readonly 屬性

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

readonly 屬性規定字段只讀,不可修改,但可復制。

2、font-size 屬性值設為0

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

雖然強制設置了input的寬高,但內容像素為0*0,所以什么也輸不進去。

3、被其他元素擋住了

其他元素可能設置了 float 或者 z-index,認真排查html結構就可以找到問題。

4、設置了 usr-select:none

這個屬性是用戶不可選中文本,可能會因為瀏覽器的一些適配問題,影響到了input框的正常事件。

5、return false;的使用清除了input框的默認事件(這是我踩得坑)

stopPropagation(): 可以阻止默認的冒泡事件,

preventDefault():可以消除默認事件,

但是在使用中貪圖方便直接用 return false 來代替以上兩種方法,阻止默認事件。

既阻止了冒泡,又消除了默認事件,如果不清楚這一點很有可能在使用on綁定事件時,使用reutrn false;

消除冒泡的時候也消除了默認事件,導致input框無法輸入內容。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM