时间戳

首页 > 解决方案 > 如何在javascript中使用z-index禁用输入或做出反应？

javascript - 如何在javascript中使用z-index禁用输入或做出反应？

问题描述

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

我想做什么？

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

标签： javascriptcssreactjs

解决方案

使用 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 效果）

推荐阅读