Error with preventing text selection in Internet Explorer

To prevent selection on a specific HTML element, I attempted to use the "user-select" CSS property in order to achieve this functionality across all browsers. Here is an example of how it was implemented:

    .section1{
      -webkit-user-select: none;  /* Chrome and Safari */
      -moz-user-select: none;     /* Firefox */
      -ms-user-select: none;      /* IE 10+ */
      user-select: none;          /* Future compatibility */    
    }

Initially, applying the "user-select" CSS property as "none" to all "sections div" worked successfully. However, when a section (section2) without the property applied was located between section1 and section3, selections were still possible from top or bottom of section2.

This issue specifically occurred in Internet Explorer, while Chrome and Firefox behaved as expected.

You can view the JSFiddle link for reference: https://jsfiddle.net/Thirunavukkarasu/bwf5emvp/

javascripthtmlcssdom-events

Answer №1

To prevent text selection in Internet Explorer versions less than 10 (including IE10 if user-select is not working) and Opera, you can use the unselectable attribute on the specific element you want to make unselectable. This can be achieved by adding an attribute in your HTML code:

<div id="Div1" unselectable="on" class="unselectable">...</div>

Here is a sample JavaScript function to make elements unselectable:

function makeUnselectable(node) {
if (node.nodeType == 1) {
    node.setAttribute("unselectable", "on");
}
var child = node.firstChild;
while (child) {
    makeUnselectable(child);
    child = child.nextSibling;
}

}

You can then call this function on the desired element like so:

makeUnselectable(document.getElementById("Div1"));

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

Exploring the wild: adjusting heights of flex items in Safari

I am facing an issue with my flex container and images. When using flexwrap and setting the flex-item width to 33%, the images look perfect in Chrome as they maintain their aspect ratios. However, in Safari, the images get stretched vertically, which is no ...

cssimagegoogle-chromeflexboxsafari

Utilize CSS to position my image in the center on mobile devices with responsive design

I am having an issue with the responsiveness of my logo image on my website's showcase section. Currently, the image is only showing up in the left corner on mobile devices, and I want it to be centered. Below is my HTML code: <section id="showca ...

htmlcssbootstrap-4

Guide to verifying all chosen options in a multiple select field using EJS

I am looking for the most effective way to check all selected options in my select dropdown when data is being edited. Here is an example of my select dropdown that supports multiple selections: <select name="tags[]" class="multi-select" multiple="" i ...

javascriptexpresstemplate-engineejs

The Stripe card element seems to be missing from the form

I'm a newcomer to angularjs and currently working on integrating version 3 of the stripe api into my angular application. I followed the steps provided on the stripe website, but faced an issue when trying to incorporate their code which is primarily ...

jqueryhtmlangularjsstripe-paymentsdom-manipulation

The useEffect hook is activated whenever any function within the component is executed

After extensive research, I have not been able to find a solution to my question. Any help would be greatly appreciated. This code snippet represents a functional component that deals with state and props: // blog id const { id } = props.match.params; // ...

javascriptreactjsgraphqlapolloapollo-client

Encountering a Keycloak Sign In Issue with NextAuth in a Next.js Application [next-auth][error][SIGNIN_OAUTH_ERROR]

Hey there, I'm currently in the process of setting up authentication for my Next.js application using NextAuth and Keycloak. Even though I've followed the documentation closely, I've hit a roadblock when trying to sign in with Keycloak. Her ...

javascriptreactjsauthenticationnext.jskeycloak-connect

Executing JavaScript events within Qunit testing

I am attempting to verify that when a user interacts with my form, the displayed error message will disappear. The final test seems to be failing unexpectedly and I am unsure of the reason behind it. My knowledge of jQuery and Qunit is still in its early ...

javascriptjqueryqunit

Steps for submitting a form through an ajax callback

After delving into the world of Ajax, I encountered a problem that has me stumped. Initially, I am requesting data to populate a table, but I'm unsure how to tackle the issue. load_data(); function load_data(page) { $.ajax({ ...

javascriptjqueryajax

Adjust the height value of each element to match the maximum height within a single line using only CSS

There are 3 divs styled with display:inline-block. I aim to adjust their height values so they match the highest one. The desired effect is demonstrated visually below. Is it doable using only CSS? ----- ----- ----- ----- ----- ---- ...

htmlcss

Retrieve the most recent version based on the provided ID and date within the array

I am working with an array of JavaScript objects that have specific properties: _id, isVersionFrom, createdAt. The _id and isVersionFrom properties store MongoDB _ids (with isVersionFrom being false for the original object), while createdAt stores a timest ...

javascriptarraysmongodbmeteor

Issue with bootstrap accordion not collapsing other open tabs automatically

I'm struggling to incorporate a Bootstrap accordion collapse feature into my project, specifically with the auto-collapsing functionality. In the scenario where there are 3 divs labeled A, B, and C, if A is open and I click on B, A should automaticall ...

csstwitter-bootstrap

What is causing the background image to not display within my <div>?

I want to add a background image to only a specific part of my website, using the image as an id called "fruit." However, the image is not showing up. Here is the code I have: <div class="p-1 text-center bg-light" id="fruit"> &l ...

htmlcsstwitter-bootstrapbootstrap-4

Creating a card design that responds to user interactions using CSS and HTML

I attempted to create a responsive queue of playing cards that adjusts based on the display width. I want this queue to perfectly fit the display width so that no card is cut off. It should be optimized for phones, tablets, and desktop screens. Additiona ...

htmlcssresponsive-design

What is the process for altering the text contained within a button?

My website uses Bootstrap and a KendoUI data grid where each row has a button like this... <button type="button" id="requestbtn1" class="btn btn-success">Request</button> I've written some JavaScript to handle the click events of these b ...

javascriptjquerycsstwitter-bootstrap

Implementing a click event to convert text to input in Angular 5

I'm struggling with setting values instead of just getting them. I want to switch from using divs to input fields and update the values when in "editMode". <div class="geim__sets"> <div *ngFor="let set of game.sets" class="geim__set"> ...

htmlangular

Troubleshooting: Issue with v-link to classname in Vue.js

This is the code I am working with: <div v-link="'/work/' + {{data.useClass}}" class="itemImg {{data.useClass}}"> When rendered in the browser, it looks like this: <div class="itemImg x50"> The expectation is that class="itemImg { ...

javascriptvue.js

Creating dynamic data fields in a Vue instance for form validation in Vue2

As a newcomer to Vue.js, I'm tackling the challenge of implementing form validation on a dynamically generated form. The input fields are populated based on the JSON object retrieved through an AJAX request. While exploring various form validation lib ...

javascriptjsonformsvalidationvue.js

inject custom styles into a Material-UI styled component

Although I have come across similar questions, none seem to directly address my current situation. I am in the process of transitioning from MUI v4 to MUI v5 and have encountered various scenarios where a specific style is applied externally. For instance ...

javascriptreactjsmaterial-ui

Using the HTML video tag to apply different background colors based on the individual machines being

My web application includes a video that is set to play against the same background color as the webpage. However, I am experiencing an issue where the video background appears differently on various machines using the same browser. What I would like to ac ...

htmlcssvue.jsbrowserbackground-color

Unable to transfer the output of a react query as a prop to a child

Working on my initial Next.js project, I encountered an issue with the article component that is rendered server-side. To optimize performance and reduce DOM elements, I decided to fetch tags for articles from the client side. Here's what I implemente ...

javascriptreactjsnext.jsreact-query