css设置input不可编辑

设置input不可编辑通常是采用HTML属性readonly和disabled来实现,下面介绍下如何使用css实现input不可编辑的效果。

css设置input不可编辑

给input加上css样式pointer-events: none;即可

input{
    pointer-events: none;
}

使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。

补充:

局限性:是只能阻止鼠标,如果要阻止键盘还要用html属性 tab-index

tab-index="-1"

不让输入框被键盘 TAB 选中。

推荐学习:CSS视频教程(公益免费)

以上就是css设置input不可编辑的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读