• 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;  100px; height:30px;"/>

    虽然强制设置了input的宽高,但内容像素为0*0,所以什么也输不进去。

    3、被其他元素挡住了

    其他元素可能设置了 float 或者 z-index,认真排查html结构就可以找到问题。

    4、设置了 usr-select:none

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

    5、return false;的使用清除了input框的默认事件(这是我踩得坑)

    stopPropagation(): 可以阻止默认的冒泡事件,

    preventDefault():可以消除默认事件,

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

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

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

  • 相关阅读:
    php面向对象三大特性
    php面向对象的重写与重载
    一组成对的数字,找出不成对的数字
    如何创建dll以及使用
    常见运行时错误
    连续数的和
    绕圆圈取球
    第一章 概述
    错误2038
    一个简单的环境光shader
  • 原文地址:https://www.cnblogs.com/daheiylx/p/14061733.html
Copyright © 2020-2023  润新知