zoukankan      html  css  js  c++  java
  • input框不能输入问题

    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; 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);
    100%;
    height:100%;
    background-size:100%;
    opacity:0.5;
    position:absolute;
    background-attachment:fixed;
    z-index:-1;
    }

    后来将z-index删除后就可以正常运行了

     

  • 相关阅读:
    POJ 3672 水题......
    POJ 3279 枚举?
    STL
    241. Different Ways to Add Parentheses
    282. Expression Add Operators
    169. Majority Element
    Weekly Contest 121
    927. Three Equal Parts
    910. Smallest Range II
    921. Minimum Add to Make Parentheses Valid
  • 原文地址:https://www.cnblogs.com/bell-ld/p/14076232.html
Copyright © 2011-2022 走看看