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刪除後就可以正常運行了