input框不能輸入問題

今天在寫程序設計登錄頁面的時候遇到了一個問題：輸入框不能輸入!

就是我寫着寫着想測試一下功能，就發現輸入框不能輸入了。？？？還能出現這種問題？？就很疑惑，然后就搜了搜無法輸入的原因。主要有如下情況：

1. input框設置了readonly屬性

這個就很好理解了，readonly屬性把input框設置成了只讀，就不可以輸入了

eg:

<input type="text" readonly="readonly" placeholder="這是一個只讀框"/>

• 只讀字段是不能修改的。不過，用戶仍然可以使用 tab 鍵切換到該字段，還可以選中或拷貝其文本。

• readonly 屬性可以防止用戶對值進行修改，直到滿足某些條件為止（比如選中了一個復選框）。然后，需要使用 JavaScript 消除 readonly 值，將輸入字段切換到可編輯狀態。

• readonly 屬性可與 <input type="text"> 或 <input type="password"> 配合使用。

2. input框自身設置font-size為0

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

<input type="text" style="font-size: 0px;width: 200px;height: 10px;" placeholder="這個框框的font-size為0" />

3. input框被其他元素擋住

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

4. 設置了用戶不可選中文本

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

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

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

 

原文鏈接：https://blog.csdn.net/weixin_44072077/article/details/104997169

 

 

仔細看了自己的代碼后發現就是第三種錯誤：input框被其他元素擋住。

#container{
 background:url(img/bj02.jpg);
 width:100%;
 height:100%;
 background-size:100%;
 opacity:0.5;
 position:absolute;
 background-attachment:fixed; 
 z-index:-1;
}

后來將z-index刪除后就可以正常運行了