Disabling of text selection

I'm attempting to prevent text from being selected within a div using the code below.

style="-webkit-touch-callout: none;
       -webkit-user-select: none;
       -khtml-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;" 
       unselectable="on"
       onselectstart="return false;"

The above code successfully prevents text selection, but it also prevents clicking on the div content and doesn't position the cursor where I click on the div. I need the ability to place the cursor at the clicked location while still disabling text selection. The div content also has the attribute contenteditable="true".

Is there a method that allows me to disable text selection without affecting mouse clicks?

Thank you,

jqueryhtmlcsstextselection

Answer №1

Take a look at this DEMO buddy

JavaScript Solution

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

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

Does this meet your requirements?

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

Repopulate data with jQuery and JavaScript

I have a div element as shown below in an HTML page: Whenever I click on any of the div elements, I save the text within the span tag to a database. Upon returning to the same page, I retrieve the saved text and try to repopulate the clicked view based on ...

javascriptjqueryhtmlcss

Fetching a DataSet from a Web Api using the GET method

Previously, my code was functioning correctly and returning the proper object type Using jquery: $(document).ready(function () { jQuery.support.cors = true; $.ajax({ url: '/api/News/5', type: 'GET&a ...

c#jqueryasp.net-web-apidatasetasp.net-web-api2

Managing Image Quality with Unsplash API

How can we ensure high quality images are embedded on the web using Unsplash API or other methods? The image displayed in the example below appears blurry and unclear compared to the original image. Original Image link: Example of embedding the image abo ...

javascripthtmlcssapi

Utilize React Material UI Slider to dynamically adjust Border Radius in your web design

Utilizing React Material UI's components like the slider and button is essential for this project. The main objective is to dynamically change the border radius of the button using the value obtained from the slider. However, there seems to be a chall ...

cssreactjsbuttonmaterial-uislider

generate radio buttons and corresponding labels in real-time

I am trying to automate the creation of elements for each record retrieved from my webservice. <label for="ZAALID_1">Zaal 1</label> <input id="ZAALID_1" type="radio" name="RESERVATIE.ZAALID" value="1" MSGCHECKED="~IF(CHK ...

javascriptjqueryhtmlajax

The Jquery code encountered an issue where it was unable to access the property 'length' of an undefined

My goal is to submit a form using jQuery and AJAX, which includes file upload functionality. The challenge I'm facing is that the forms are dynamically created, so I need to identify which form was clicked and retrieve its input values. $(document).r ...

javascriptjqueryajax

Restrict the number of choices in a drop-down menu using Angular

Is it possible to limit the number of results displayed in a dropdown select tag and add a scrollbar if there are more options? Check out my code below: <select class="form-control" name="selectedOption" [(ngModel)]='selectedOption'> ...

angularcssangular5

I seem to have encountered a design issue with a form I am working on. Something seems amiss as the lower edges are not aligning properly

I am facing an issue with the design of a form. The lower edges are not aligned properly. What could be the cause of this problem? <div class="form-group row"> <label for="inputPassword" class="col-sm-2 col-form-label col-form-label-lg">CIDR-S ...

htmlcssbootstrap-4

Adjusting the inline styling of an element to enhance its appearance

Currently, the code is functioning as follows: var ball = document.getElementById('ball'); //some code let bml = parseInt(ball.style.marginLeft,10); //if *conditional statement* is true, do: ball.setAttribute("style","margin-left:& ...

javascripthtmlcssattributes

SVG utilizes a distinct color for every individual path

I have an SVG file containing two different paths. <path d="M 84.4 53.2 C 75.3 50.1 67.1 48.5 59.6 48.3 C 51.2 48 45.2 47.5 41.5 46.5 C 35.7 45.1 29.9 42.4 23.9 38.4 C 21.6 36.9 19.4 35.2 17.3 33.2 C 19.4 34.2 21.6 35 23.9 35.6 C 27.3 36.5 34.1 37 44 ...

csssvgpath

How do I adjust the Bootstrap 4 column width to match the size of its content?

I am facing the following situation: [![enter image description here][1]][1] What I want is: Number 1: Adjust the column width to fit the content, in this case the image. Number 2: Resize the column width to accommodate the text "Title of Content" ...

htmlcssbootstrap-4

In Angular/CSS, setting the height of all parent elements to 100% does not necessarily ensure that the child element

I have a page where I've set all parent elements to a height of 100%, including the root of the app. However, when I reach a component in the body, it seems to be ignoring the height settings. Even though my dev tools show that the direct parent of ". ...

cssangular

Adjusting visuals with the combination of mouse scrolling and a timer

Is there a way to automatically change images if the user doesn't scroll within 7 seconds? I currently have a code that changes images based on mouse scroll. <script> const imageContainer = document.querySelector('.image-container'); c ...

javascripthtmljquery

Perform a Rails Ajax request to update a like or dislike status

Is there a way to implement like/dislike functionality in my RoR application using Ajax requests? I have integer values for both like and dislike counters. How can I use Ajax requests to increment either the "like" or "dislike" counter in my methods? In ...

jqueryruby-on-railsrubyajaxruby-on-rails-4

What is the reason why the show() function in JQuery only applies to one specific element, rather than all elements selected with the same selector?

JSFiddle. This example code features a nested <table> within another <table>. The main issue concerns the click listener for the #add button. Specifically, the final if/else statement in the function. When you execute this code and click the ...

javascriptjqueryhtmlcss

What is the best way to retrieve the class name of a div element that comes before with jquery?

I'm currently working on a new design and I need to retrieve the name of the class from a div element that is positioned above another div element. Here's an example: <div class="random name a"></div> <div class="the name of this ...

jqueryhtmlcss

Optimal Guidelines for Structuring Tables in ASP.NET

In the midst of my ASP.NET Core Project, I am faced with a table that requires filters based on the current tab. Initially, I considered using JSON to call C# and retrieve the list of qualified items for the table. However, I began contemplating whether i ...

c#jqueryasp.netjsonperformance

Creating a vertical triangle pointing to the right as the border of a div element

Currently, I'm working on a mockup that includes the following elements. I am attempting to ensure that the triangular right end of the "Delay Your Payments" div matches the mockup exactly. To achieve this, I aim to use CSS without relying on sliced ...

css

Encountering a 500 (Internal Server Error) while trying to insert data into the database through ajax

In the HTML code, I have a basic AJAX function that is triggered by a button press. The goal is to have the PHP script being called insert the JavaScript variable sent into a database. var myval = 'testuser'; // generated by PHP $.a ...

javascriptphpjquerymysqlajax

Issue with AjaxSetup overlapping with jqgrid

How can I set up global AJAX calls using ajaxsetup without interfering with the functionality of jqgrids on my website? I want to apply the code below to my AJAX calls, excluding those related to jqgrids. $.ajaxSetup({ type: "POST", contentType: ...

javascriptjqueryajaxjqgrid