Block Keyboard Inputs in html pages using css or javascript

Question

I have a <div> .

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

My requirement is for this <div> , I should not allow User to use Keyboard shortcuts or tabs or pointers using Keyboard.

I tried tabindex="-1" , But issue is the Component model is in different page and did not work for all controls in component models.

Can any one help me doing this ?

Answer 1

this should work for all keyboard and mouse inputs :

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