Is there a way to prevent text selection on double click while still allowing selection on mouse drag?
Whenever I try to remove selection on dblclick or mouseup, it flashes, which is not the desired outcome as shown in this jsfiddle.
UPD: I am not looking to disable selection entirely; I only want to prevent it on double click events.
HTML content to try out:-
<h2>Attempt to highlight me</h2>
<div id="foo" unselectable="on">dljafdlhjafdbdfasjhadsfh adfsjlfhads h jkfkaj fjf ajksfhajks afjk sdhfkj asfadks jfsdjf kjasdhf kjasdh fkjasdfk jadskjfhakdsjf kajsdf kjah kfjas kdjfads</div>
CSS in action:-
#foo {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
This property was introduced in IE 10.
More information available at http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
It seems that there isn't a straightforward CSS solution for preventing only doubleclick selection while still allowing text to be selectable via drag. One workaround is to use user-select:none; to completely block text selection with CSS.
Alternatively, you can detect doubleclick events in JavaScript and clear the selection using window.getSelection().empty();
Feel free to utilize this pseudo-selector whenever necessary in your code:
::selection {
background: transparent;
color: initial;
}
For a JavaScript solution that is compatible with all browsers, you can use the following code:
<div onselectstart="return false">your text</div>
Alternatively, you can opt for a CSS solution that is supported by most browsers:
.not-selectable {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
It's worth noting that the CSS solution may not work effectively on many mobile browsers.
Disclaimer: I must admit that my knowledge of HTML and CSS is minimal, so please bear with me! Hello everyone, I am attempting to utilize selenium[Java] to browse a website and retrieve a file. While I managed to successfully get past the login page, I fi ...
Recently, I've been delving into nodejs and express js. My aim is to send a json object to my nodejs application using postman. Below is the code snippet from my app: var express = require("express"); var bodyParser = require('body-parser') ...
Looking to send form data to PHP using jQuery. Check out the code below. -------------HTML FORM-------------- <div id="createQuestionBlock"> <form id="createQuestionForm" action="" method="POST"> Question Code: <input id="code" ...
There are two div sections on a page, with one positioned on the left and the other on the right. The div on the right contains multiple dynamically generated tags which necessitate a horizontal scroll bar (overflow:auto). This causes the div's height ...
I'm currently working on test driven development for an angular service using Jasmine. However, I've encountered an issue with resolving the $resource dependency, which is causing a stumbling block at the beginning of my process. The specific er ...
Currently working on constructing a shopping cart. My goal is to include the array invoice in localstorage for future reference. I suspect there may be some flaws with this particular approach. angular.module('myApp', ['ngCookies']); ...
Every time I run my code, I encounter this reference error but I can't figure out what's causing it. ReferenceError: Cannot access 'search' before initialization App C:/Users/GS66/Desktop/IN20/IFN666/week4/src/App.js:60 57 | 58 | expor ...
Do you have a question that needs answering? It may seem simple at first glance, but I've been struggling to find a solution. My goal is to create a PHP loop where the "$ad_id" varies each time the loop is executed. Then, I want to display a button ea ...
I am facing an issue with my app where the className of buttons is not updating correctly when clicked. It seems that only active buttons trigger a re-render, while non-active ones do not. This behavior is confusing to me. Here's the code snippet for ...
I am looking to integrate the Miromannino Justified Gallery () into my project, but I want it to showcase images fetched from Flickr. I have successfully implemented the code to retrieve photos from Flickr using the API through Ajax: $.ajax({ url ...
Recently, I set up the NPM package along with the http server within the "server" directory. Initially, everything was functioning smoothly; however, the server abruptly ceased operating. Upon attempting to launch the local http server, an error message a ...
Greetings to all! I am excited to be a part of this community as I embark on my programming journey. I haven't been able to find any information on this particular topic, so I've taken the initiative to start a new discussion. If anything seems o ...
I am currently working on integrating the puppeteer-jest test framework with TestRail using TestRail API. To accomplish this task, I need to identify which tests have failed and which tests have passed. Despite searching through the official GitHub Reposi ...
Recently started working with Python and Django, but I may have bitten off more than I can chew. If anyone has the time to help educate me, I would greatly appreciate it. My main model deals with "work orders," each of which is linked to subsets of data. I ...
I've been trying to incorporate Swiper for a slider in my React application, but it's not behaving as expected. Here's what I did: npm install Swiper Then I imported Swiper in the componentDidMount method of my component like this: import ...
I've been experimenting with creating functional components in Vue using the render method. Here's an example of how I attempted to do this: import Vue from "vue" const { render, staticRenderFns } = Vue.compile(`<div>Hello World</div&g ...
Currently, I'm working on a chrome app that utilizes local storage. The backend returns JSON data which I then save locally and encrypt all the items within the JSON. I have multiple sets of JSON with different encryption functions for each set. I at ...
I am currently executing Jasmine tests within a SystemJS and Typescript environment (essentially a plunk setup that is designed to be an Angular 2 testing platform). Jasmine is being deliberately utilized as a global library, rather than being imported vi ...
I am currently working on a mockup page where the accordion feature is functioning well. However, I am looking to implement a tab-like system that will allow users to navigate between different pages. Specifically, I want users to be able to click on page ...
I am facing a challenge with changing the transparency of a <div> element's background color using jQuery. An external API provides me with a hexadecimal value for the color: #abcdef I make use of jQuery (version 1.9) to apply this color using ...