使用 css 或 javascript 在 html 页面中阻止键盘输入答案

【问题标题】：Block Keyboard Inputs in html pages using css or javascript使用 css 或 javascript 在 html 页面中阻止键盘输入
【发布时间】：2018-07-12 08:09:18
【问题描述】：

我有一个<div>。

<div id="ViewActivitydiv" >
                @await Component.InvokeAsync("QuestionAnswers", new { activityQuestionAnswersList = Model.ActivityQuestionAnswers?.ToList() })
</div>

我的要求是这个 <div> ，我不应该允许用户使用键盘快捷键或选项卡或指针。

我试过tabindex="-1"，但问题是组件模型位于不同的页面中，并且不适用于组件模型中的所有控件。

谁能帮我做这件事？

【问题讨论】：

向我们展示该视图组件的 index.cshtml .....
如果 tab-index 不适合您，您可以使用基于 JS 的解决方案吗？您可以使用 onfocus 或 jQuery .focus() 事件处理程序并调用另一个对象来代替焦点。这是一个 JS hack，但如果您的脚本在两个视图中加载，它可能会起作用。

标签： javascript css bootstrap-4

【解决方案1】：

这应该适用于所有键盘和鼠标输入：

$("#ViewActivitydiv").on("keydown keypress keyup click contextmenu", false);

#ViewActivitydiv {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="ViewActivitydiv">test</div>

【讨论】：

'click' 和 'contextmenu' 事件不应该是必要的，因为 'pointer-events' 设置为 'none'。