仅在 html 顶层处理 keydown 事件答案

【问题标题】：Handeling keydown events only in top layer of html仅在 html 顶层处理 keydown 事件
【发布时间】：2021-07-23 15:22:48
【问题描述】：

我正在开发一个 web 应用程序，其中我有一个带有一些 JS 功能的底层 html 文件，我无法干预。通过 JS，我在我的 css 中使用z-index: 1000; 在该页面上方创建了一个层。现在我需要一些输入，但我的 keydown 事件不能与下面的“页面”交互。

我的想法是使用类似的东西：

$(document).keydown(function (e) {
  e.stopImmediatePropagation();
  e.preventDefault();
  return false;
});

据我了解，这应该会阻止事件触发。但它也会禁用我的叠加层中的输入。

是否有可能只接受<textarea> 中的按键输入而不触发底层页面中的按键事件？

感谢您的任何建议。

代码：

.html

带有<head> 和<body> 的标准html，我不想与之交互，因为它是我公司生产中运行了10 年的软件。

.js

function createModal() {
  return '<div class="modal" tabindex="-1">
<div class="modalContainer">
     <div class="modalHeader">Störmeldungen<span id="closeModal" class="btn" style="float: right">X</span></div>
     <div class="modalBody"><div class="btn" id="btnHistory">Verlauf anzeigen</div><div class="btn btnNewMessage">Neue Meldung absetzen</div></div></div></div>
</div>';
}

function inputMessage() {
  return (
    '<div id="customMessage">
         <div id="textInput"><label for="description" id="inputLabel">Um was für ein Problem handelt es sich?</label><br><textarea id="description" placeholder="Bitte beschreiben Sie den Fehler"></textarea></div>' +
        '<div class="checkBox"><label for="localSupport">Ich benötige Hilfe vor Ort</label><input type="checkbox" id="localSupport"></div>' +
        '<div class="checkBox"><label for="noKeyboard">Ich verfüge nicht über eine Tastatur</label><input type="checkbox" id="noKeyboard"></div>' +
        '<div class="btn" id="sendMessage">Störmeldung absetzen</div>
    </div>'
  );
}

$("body").prepend(createModal());
$(".modalContainer").append(createMessage());
$(".secondModal .modalBody").append(inputMessage());

.css

.modal {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;

.modal .modalContainer {
  margin: 5% auto;
  width: 75%;
  height: 80%;
  box-sizing: border-box;
  position: relative;
  border: 2px solid black;
}
}

【问题讨论】：

如果这背后的意图是限制客户端可以在浏览器中执行的操作，您应该注意一个事实，即使是没有经验的用户弄清楚如何禁用或修改 JS他们的客户
请将用于创建叠加层的 HTML、CSS 和 JS 添加到问题中
添加了部分代码。希望对你有帮助

标签： javascript html jquery

【解决方案1】：

这不起作用吗？通过在隐藏的 html 上链接 keydown。

$( "#idForUnderlyingHtml" ).keydown(function( event ) {
    event.stopImmediatePropagation();
    event.preventDefault();
    return false;
});

【讨论】：

不幸的是它没有。
我现在试了，没有阳性结果：$(document).on("keydown", "#idOfUnderlyingHtml", function (e) { if ($(".modal").is(":visible")) { e.stopImmediatePropagation(); e.preventDefault(); return false; } });
@fatum_insect 也许这可以帮助你stackoverflow.com/q/49811021/12564616