使用CSS或JavaScript阻止HTML页面中的键盘输入

Question

我有一个<div>。

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

我的要求是为此<div>，我不应该允许用户使用键盘使用键盘快捷键，标签或指针。

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

有人可以帮我吗？

Answer 1

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

// The Cloud Functions for Firebase SDK to create Cloud Functions and setup triggers.
const functions = require('firebase-functions');

// The Firebase Admin SDK to access the Firebase Realtime Database.
const admin = require('firebase-admin');
admin.initializeApp();

$("#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;
}