Prevent Keyboard Interactions on Web Pages with CSS or JavaScript

There is a <div> element on my page.

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

I need to restrict users from using keyboard shortcuts, tabs, or pointing devices within this specific <div>.

I attempted to add tabindex="-1", but it did not work as expected since the component model is located on a different page and affects only certain controls inside of it.

Could someone please assist me in achieving this? Thank you.

javascriptcssbootstrap-4

Answer №1

Here is a solution that will cater to 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance the input by incorporating more fields without altering the existing content

Currently, I am working on creating an input form that includes multiple fields and has the capability to generate a preview of the entered content in a separate div. One key feature I would like to implement is allowing users to add additional fields as n ...

javascripthtmlformstextarea

"Transfer" the code within a Message Sending template

Although I am not well-versed in coding like many of you, I have been able to customize a free template to suit my needs. However, I am struggling with one aspect. When users submit their information on the contact form, I want their message and details to ...

htmlcss

Tips for resizing an image to fit within a col-sm-12 column in Bootstrap

I have a dilemma with two columns - I want to place my image in the first column so that the second column can move down. see image here Here is my HTML code: <div class="container-fluid"> <div class="row"> ...

htmlcssresponsive-designbootstrap-5

My Discord bot automatically sends an embedded message whenever someone replies to a message

Is there a way to make the bot only send the embed message when mentioned with @, but it keeps sending again when replied? const mentionEmbed = new Discord.MessageEmbed() .setColor("#FF5733") .setTitle("Greeting, Roberval here ...

javascriptnode.jsdiscorddiscord.js

Do I need to pass data to a V model? Is it necessary to initialize the data if it is being passed from a different component

I need to assign the value of the content data from another component to the this.newTutorial.content push function. I successfully obtained the data, but now I am facing an issue with assigning it to my v-model. It's like transferring data from one v ...

javascriptvue.jspropv-model

Developer server experiencing CSS issues in Django admin interface

Experiencing some odd issues with the Django admin application here. I've got everything up and running on the manage.py runserver development server, but for some reason it looks like this: This obviously isn't what I want, so I'm trying t ...

cssdjangodjango-admin

Creating a tree array in JavaScript from JSON data

I have been struggling to create a tree array from the given JSON data. I have attempted to use filter, map, and reduce methods, but haven't been successful in achieving the desired result. [{ "code": "2", "name": "PENDING" },{ "code": "2.2", ...

javascriptjsonmultidimensional-array

Using TypeScript to send state through history.push({...})

I recently utilized the history.push method to redirect to a specific URL while passing along some information through the included state. Here's how I implemented it: const history = useHistory() history.push({ pathname: '/someurl/', ...

javascriptreactjstypescriptreact-router

Nodejs: Implementing Context similar to React

I'm trying to achieve a similar functionality to React Context in Node.js but facing difficulties. In React, by creating a single context, I can provide and consume different values in my components based on the value passed to the <Provider/>. ...

javascriptnode.jsreactjsreact-context

What is the best way to trigger an AJAX request when a user navigates away from a webpage or closes the

The Challenge at Hand Greetings, I am currently developing a database-driven game that involves users answering questions and earning the right to change the question by providing the correct answer. However, I have encountered a significant issue which ...

javascriptphpjqueryajaxforms

Preserving Search and Filter Settings in jQuery Data Tables

I've been working with a datatable and I'm trying to figure out how to keep dropdown filters and search parameters saved when the page is reloaded, just like shown in the screenshot below. However, I also want these parameters to be cleared if th ...

javascriptjquerydatatables

Is there a way to initiate a callback function once all the contents of an UpdatePanel have been fully loaded?

Looking for a solution with an ASP.NET UpdatePanel that contains multiple images. I am trying to trigger some javascript code after the UpdatePanel is refreshed, but only after all images have finished loading. I attempted using add_endRequest as a callb ...

javascriptasp.netupdatepanel

Stop the body from scrolling when dialog is open on a mobile screen

I am encountering an issue on a mobile screen where I am displaying a dialog that is longer than the screen size, causing it to scroll. The problem arises when scrolling past the bottom of the dialog (I am utilizing Bootstrap 3) as instead of stopping, it ...

javascriptjquerycsstwitter-bootstrapmobile

Unveiling the mystery of Google's invisible reCAPTCHA integration with WordPress and utilizing Ajax

Trying to integrate Google Invisible reCaptcha into a custom submit form using submit.js (ajax) has been a successful endeavor thanks to the guidance provided in this helpful tutorial on implementing the new Invisible reCaptcha from Google. However, when ...

javascriptphpjqueryajaxwordpress

How to implement dynamic aggregate functions with parameters in Express and Mongoose

I have implemented an aggregate function in mongoose to fetch some data, with a static implementation. app.get("/male",function (req,res) { Record.aggregate([ { $match: {"gender": "male"} }, { $group:{ _i ...

javascriptmongodbexpressmongooseparameters

Creating a Go/Hugo Carousel Using Iteration Markup

I am currently working on developing a Go/Hugo Theme with Bootstrap 4. In the index.html template file, I have included code to iterate through the posted articles: <div class="col-12 col-md-12" id="main"> <div c ...

carouselbootstrap-4hugo

Issue with changing the height of a textarea in a mobile browser when it is

I'm currently facing an issue specific to mobile devices that I have also encountered on Google Chrome (even when using the developer tools in mobile view). The problem is quite straightforward. There is a simple form on the website, consisting of a ...

htmlcssmobile-websitemobile-browsermobile-chrome

What is the best way to create text boxes that change dynamically according to user input using PHP and JavaScript?

Is it possible to modify the code below to allow for dynamic dropdowns to appear based on a number entered by the user in a textbox? I would like the dropdowns to adjust based on the number provided by the user. $query = mysqli_query($con, "SELECT * FRO ...

javascriptphpjqueryhtmlajax

Even though the model value is set to true, the material check box remains unchecked

My mat-table contains data and checkboxes. The checkboxes should only be checked when the element.select property is true. However, when I use [(ngModel)]="element.select", all the checkboxes end up getting checked. Below you can find the code snippet: &l ...

javascripthtmlcssangular

When coding on Github pages, the behavior of code blocks can vary depending on whether

I am interested in obtaining the offline version, which can be seen here: https://i.sstatic.net/NKFSQ.jpg On the other hand, the online version has a different appearance: https://i.sstatic.net/133gH.jpg If you want to view the incorrect version, click ...

cssjekyllgithub-pages