如何在元素opacity属性小于1时禁止用户填写表单

纯CSS适配静态场景 #

当容器的opacity固定为小于1的值时，直接添加pointer-events: none属性即可禁用内部表单的所有交互，修改后的CSS代码如下：

.container{
  height: 100px;
  width: 250px;
  background:blue;
  opacity: 0.2;
  /* 新增以下属性禁用交互 */
  pointer-events: none;
}

对应的HTML无需改动：

<div class="container">
  <form>
    <input type="text">
  </form>
</div>

JS适配动态opacity场景 #

如果opacity是通过脚本动态修改的，可新增逻辑自动判断opacity值切换交互权限：

const container = document.querySelector('.container')
// 每次修改容器opacity后触发以下判断
const currentOpacity = Number(window.getComputedStyle(container).opacity)
container.style.pointerEvents = currentOpacity < 1 ? 'none' : 'auto'

内容的提问来源于stack exchange，提问作者mohammed adnan