在编写登录页面时遇到input框无法输入的问题。主要可能由readonly属性、font-size设为0、被其他元素遮挡、用户不可选中文本设置及return false清除默认事件导致。文中详细分析了这些原因，并提供了相应的解决方法。通过排查，发现是由于input框被z-index为负值的元素挡住，删除该属性后恢复正常。
input框不能输入问题
今天在写程序设计登录页面的时候遇到了一个问题：输入框不能输入!
就是我写着写着想测试一下功能，就发现输入框不能输入了。？？？还能出现这种问题？？就很疑惑，然后就搜了搜无法输入的原因。主要有如下情况：
1. input框设置了readonly属性
这个就很好理解了，readonly属性把input框设置成了只读，就不可以输入了
eg:
只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
readonly 属性可以防止用户对值进行修改，直到满足某些条件为止(比如选中了一个复选框)。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。
readonly 属性可与 或 配合使用。
2. input框自身设置font-size为0
这种情况比较少见，但是有些时候，为了消除span元素之间的间隔会让font-size为0，此时input框应该是内容区为0*0个像素，如果强行设置input宽高，这时就算input框显示了，因为font-size为零，就啥也输不进去。
3. input框被其他元素挡住
这种情况大致是因为浮动和z-index引起的，它的特点是即使点击input元素也不会出现选中状态，只要认真排查一下html的结构合不合理，就可以找到问题。
4. 设置了用户不可选中文本
可能会因为浏览器的一些适配问题，导致你设置的user-select：none
最低0.47元/天 解锁文章
3267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
