html页面input框输入不了,input框不能输入问题

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结构就可以找到问题。

这是我踩的坑，我有3个元素设置了float:left;，实际解析的时候相当于是 遮挡 了。但是我一直在排查是否是属性设置的问题。

4、设置了 usr-select:none

这个属性是用户不可选中文本，可能会因为浏览器的一些适配问题，影响到了input框的正常事件。

5、return false；的使用清除了input框的默认事件

stopPropagation()： 可以阻止默认的冒泡事件，

preventDefault()：可以消除默认事件，

但是在使用中贪图方便直接用 return false 来代替以上两种方法，阻止默认事件。

既阻止了冒泡，又消除了默认事件，如果不清楚这一点很有可能在使用on绑定事件时，使用reutrn false；

消除冒泡的时候也消除了默认事件，导致input框无法输入内容。