javascript - 如何在 javascript 中使用 z-index 禁用输入或使用react？

Question

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

我想做什么？

我有两个弹出窗口(一个显示信息，另一个带有输入元素、取消和提交按钮)。现在这两个是从同一个 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>

Answer 1

使用 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 一个负值，readonly 或 disabled(将有暗淡的 css 效果)