我想禁用输入,意味着用户无法在输入元素中输入某些内容。

我想做什么?

我有两个弹出窗口(一个显示信息,另一个带有输入元素,取消和提交按钮)。现在,这两个是从同一个div渲染的,该div的z-index高于应用程序中的所有其他元素。表示当这些对话框显示时,用户将无法单击其他任何元素。

现在的问题是我不希望用户将任何内容输入到我上面提到的对话中的输入元素中。

有没有办法我可以用z-index做到这一点?我不想在输入中添加一些禁用的属性,因为它可能会破坏代码在某处。

以下是html代码,



#root {
  position: fixed;
  z-index: 25;
}

.input_dialog {
  flex-grow: 1;
}

.info_dialog {
  width: 300px;
}

<div id="root">
  <div class="info_dialog">some info</div>
  <div class="input_dailog">
    <form>
      <div class="input_with_actions">
        <input>
        <div class="actions">
          <button>cancel</button>
          <button>submit</button>
        </div>
      </div>
    </form>
  </div>
</div>

最佳答案

使用CSS可以使用pointer-events: none



#root {
  position: fixed;
  z-index: 25;
}

.input_dialog {
  flex-grow: 1;
}

.info_dialog {
  width: 300px;
}

<div id="root">
  <div class="info_dialog">some info</div>
  <div class="input_dialog">
    <form>
      <div class="input_with_actions">
        <input tabindex='-1'>
        <div class="actions" >
          <button>cancel</button>
          <button>submit</button>
        </div>
      </div>
    </form>
  </div>
</div>





更新为ankit指出指针事件在选项卡导航中不起作用。因此,您需要给tabindex一个负值,只读或禁用(css效果会变暗)

10-07 19:59
查看更多