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

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；影响到了input框的正常事件

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

我们知道使用stopPropagation(); 可以阻止默认的冒泡事件，使用preventDefault();可以消除默认事件，但是在使用中贪图方便直接用return false；来代替以上两种方法，阻止默认事件用reutrn false，但是在jquery中，reutrn false；既阻止了冒泡，又消除了默认事件，如果不清楚这一点很有可能在使用on绑定事件时，使用reutrn false；消除冒泡的时候也消除了默认事件，导致input框无法输入内容。

仔细看了自己的代码后发现就是第三种错误：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删除后就可以正常运行了

标签：false,默认,readonly,不能,input,输入,size

来源： https://www.cnblogs.com/bell-ld/p/14076232.html

html页面input框输入不了,input框不能输入问题相关推荐

vue el-element中el-select的el-option选中值，但页面框中不显示值，需要输入一个其他框值才显示，input同理
问题描述: el-element中el-select的el-option选中值,但页面框中不显示值,需要输入一个其他框值才显示.或者解决input无法输入值. //在el-select中写一个事件 @ ...
创建输入控件(input控件、文本框、密码框、单项选择、多项选择、重置与提交按钮的设置)
创建输入控件 input控件的相关概念 input控件的属性 input控件的类型文本框的设置密码框的设置单项选择的设置多项选择的设置重置与提交按钮的设置综合运用相关概念选择题及参考答案 ...
html输入框只能输入几个,input 两个input框只能允许同时输入一个
html 金额(一次性) 金额(分期) 分期每期元 js function changeipt(){ var money=$("#money").val(); var stag ...
php如何禁掉文本框输入,如何禁止input文本框输入
如何禁止input文本框输入 nput文本框用于接收用户输入的信息,我们有两种方法可以禁止input文本框,一种方法是使用readonly,另一种方法是使用disabled,但二者之间还是有区别的,请 ...
php+输入框只读,设置文本框只读（textbox/input readonly）不允许输入
文本框一般是用来让用户输入填写资料的,但有的时候只是用它来显示资料,也就是不允许输入任何内容,这应该怎么设置?只要添加一个只读属性(readonly)就能达到这个目的. 文本框有两种,一种为服务器控件 ...
html input标签清除历史输入记录下拉框
一.在html 中.如果input标签是放在form表单中的话是会有历史记录的. 比如: <!DOCTYPE html> <html> <head> </he ...
html5 规定输入字段,HTML5 Input属性详解
本篇教程探讨了HTML5 Input属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < value 属性 value 属性规定输入字段的初始值: rea ...
input得到焦点显示文本框,失去焦点隐藏文本框
上一篇 : input 输入的内容时更改input的宽度此篇是上一篇的延伸功能 input得到焦点显示文本框,失去焦点隐藏文本框思路 : 1 创建一个文本标签font和输入标签input,页面加载 ...
JavaScript表单事件获取焦点：focus 失去焦点：blur 输入事件：input 变化事件：change
JavaScript表单事件焦点处理焦点处理主要包括focus(获取焦点)和blur(失去焦点)事件类型.所谓焦点,就是激活表单字段,使其可以响应键盘事件. 获取焦点:focus 当单击或使用Ta ...
html5 文本框限制,html中input禁止输入(禁止获得焦点)多种方法及input限制数字和长度...
input禁止输入(禁止获得焦点) 1: readonly规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本. 2:disabled 被 ...

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

html页面input框输入不了,input框不能输入问题相关推荐

最新文章

热门文章