设置 input 不可编辑通常是采用 html 属性 readonly 和 disabled 来实现, 下面介绍下如何使用 CSS 实现 input 不可编辑的效果.
给 input 加上 CSS 样式 pointer-events: none; 即可
- input{
- pointer-events: none;
- }
使用 pointer-events 来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发. 如果元素后代明确指定了 pointer-events 属性并允许其成为鼠标事件的目标, 那么指向该元素的任何事件在事件传播过程中都将通过父元素, 并以适当的方式触发其上的事件侦听器. 当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获 (将会穿过父元素而指向位于其下面的元素).
补充:
局限性: 是只能阻止鼠标, 如果要阻止键盘还要用 HTML 属性 tab-index
tab-index="-1"
不让输入框被键盘 TAB 选中.
来源: http://www.css88.com/qa/css3/15204.html