When you double-click and press Shift while using the arrow keys, you can select multiple elements in a content

When you doubleclick there, Chrome will display the entire text instead of just selecting that word. This issue occurs when you place the cursor to the left of H and press CTRL + right arrow key.

<div contentEditable="true">Hi<strong>1</strong>there<span>2</span>you</div>

This behavior should only select there in the first case, and only Hi in the second case.

Is it possible to correct this behavior using only CSS? If not, is there a solution with JavaScript? Note: It's important that no new symbols can be added to the editable text area.

JSFiddle: https://jsfiddle.net/7o6ykLt0/19/

Expected outcome after double-clicking there:

https://i.sstatic.net/x2V7T.png

Actual outcome:

https://i.sstatic.net/KsPRy.png

javascripthtmlcssgoogle-chrome

Answer №1

By heeding the advice of Heretic Monkey, you can seamlessly add a &ZeroWidthSpace; in between your words:

<div contentEditable="true">Hi&ZeroWidthSpace;<strong>1</strong>&ZeroWidthSpace;there&ZeroWidthSpace;<span>2</span>&ZeroWidthSpace;you</div>

To further automate this process, you can dynamically insert these characters:

for (var node of document.querySelector("div[contenteditable]").childNodes)
  if (node.nodeType === Node.TEXT_NODE)
    node.nodeValue = "\u200b" + node.nodeValue + "\u200b";
<div contentEditable="true">Hi<strong>1</strong>there<span>2</span>you</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

What is the best way to dynamically update a specific value within an object based on the current state in React/Next?

I have implemented a Context API where an object is set, and when the user clicks, the state changes. I need to update a specific value with the new state value. const initialState = { notification: false, setting: false, profile: false, } exp ...

javascriptreactjsnext.js

Is there a way to open Internet Explorer using a specific URL from a different browser?

Imagine a scenario where a visitor lands on www.mysite.com using MS Edge. Instead of staying in Edge, I would like the page to recognize that Edge is being used and automatically launch Internet Explorer with the same URL. Is there a way to achieve this? ...

javascripthtmlinternet-explorerlaunchmicrosoft-edge

Enhancing the visual appeal of a JSON object with texture using Three.js

Struggling to apply texture to my 3D Dog JSON model exported from clara.io. Tried using Objectloader and Textureloader, but the texture won't load onto the model. The code might be incorrect or in the wrong place. Looked at other examples but no luck ...

javascriptjsonthree.js

The Bootstrap form validation is preventing the Ajax request from functioning properly

Having successfully implemented a form with Bootstrap validation, I encountered an issue where the AJAX Post method fails to execute after validation. The catch clause does not capture any errors and only the ajax portion of the code doesn't run. Belo ...

javascriptjqueryajaxbootstrap-4

Maintain HTML formatting when page is refreshed

I am new to HTML and JavaScript, and I'm trying to modify the JavaScript code below so that when I reload the page, it retains the most recent active tab instead of defaulting back to the first tab. Currently, if I click on the second tab for "Paris" ...

javascripthtmltabs

What sets apart the intended usage of the DOM `hidden` from the CSS `visibility` property?

Exploring the DOM property hidden and the CSS property visibility, I find myself unsure of when to utilize each one. What are the distinctions in their intended purposes? While they may serve similar functions, I am curious about the underlying motivation ...

csshtml

What is the best way to trigger the Javascript blur event following a click event that results in the element losing focus

Encountering this issue multiple times has left me dissatisfied with the solutions I've implemented in the past. The challenge lies in dealing with an input box that triggers a validation process on blur, while also having a button that populates the ...

javascriptjqueryeventsonclickonblur

Tips for fixing the error "Unhandled error: state.set is not a function"

My code is utilizing immutable.js in the reducer, but I keep encountering an error stating 'state.set is not a function'. Interestingly, when I modify the code to exclude immutable, the error disappears. import React from 'react'; impo ...

javascriptreactjsreduximmutable.jsreducers

The issue of Three js object turning dark after implementing Phong Shading

I have a project where I am displaying 3 cubes and toggling between MeshLambertMaterial and MeshPhongMaterial when pressing the A key. However, I'm facing an issue where the object turns black when applying the phong shading, even though I've cal ...

javascriptthree.jsvertex-shaderphongthreejs-editor

When I make edits to a specific item, the original collection will automatically update with the changes and will keep adding as I click

Whenever I click on an item in collection A and move it to collection B, any changes made to the Value of Collection B also affect the item in collection A. How can this issue be resolved? The sum exceeds the limit after multiple clicks. var app = ...

javascriptangularjs

Tips for accessing an array you've constructed in the $onInit() function within Angular-Fullstack

I am currently working on an Angular fullstack project that utilizes Babel and Angular 1.5.0. The problem I am encountering is that I am trying to initialize an array (this.events = []) but unable to access this array in $onInit() where I need to populate ...

javascriptarraysangularjsecmascript-6angular-fullstack

Remove the model from operation

I'm fairly new to angularjs and have a working service. However, I want to move the patient model out of the service and into a separate javascript file. I believe I need to use a factory or service for this task, but I'm not entirely sure how to ...

javascriptangularjsviewmodelangularjs-serviceangularjs-factory

Struggling with CSS float problems

I'm currently working with the Pure CSS framework and my code resembles this: <div class="container pure-g"> <header class='pure-u-1'> <h1 class='logo'> <a href="#">TEST</a> </h1> &l ...

htmlcssyui-pure-css

Exploring Pastebin with Python (Parsing JavaScript-driven websites)

I'm currently encountering an issue when attempting to crawl JavaScript-rendered pages. My approach involves using the python-qt4 module and following a tutorial available at: While the tutorial works flawlessly with the example page provided at: I ...

javascriptpythonseleniumscrapyweb-crawler

The Vue.js 3 input field remains unchanged even after updating the value in the watch hook

I recently implemented a TextInput component and followed the instructions in the Vue documentation by adding the v-model directive to my component. Here is the code snippet of my component: <template> <div class="floating_input"> ...

javascriptvue.jsvue-componentvuejs3

Having trouble with the Jquery animate() function?

I recently developed a jQuery animation where clicking on specific buttons triggers a hidden div to slide from left: -650px; to left: 0px;. You can see an example by clicking here. However, I've noticed that when another button is clicked to reveal a ...

javascriptjquerycss

qbittorrent Application Encountering 'Element Not Found' Error During Selenium Automation Testing

My goal is to automate the process of downloading movies through magnet links using the BitTorrent web UI. I encounter an issue when trying to add the torrent link as my code fails to locate the element where it should be inserted. The same problem arises ...

pythonhtmlpython-3.xselenium

Creating a sleek animated analog clock using CSS and jQuery

I am facing a small issue with my CSS3/jQuery analog clock. Currently, the movement of the clock hands is a bit abrupt. I would like the animation to be smooth. I attempted using transition: all .1s, but it gets messy when the clock hands reach the top po ...

javascriptjquerycss

Adding an HTML element to the DOM in an AngularJS directive without using jQuery

Looking to enhance my AngularJS directive by including an svg tag within the current element, currently using jQuery for this purpose. link: function (scope, iElement, iAttrs) { var svgTag = $('<svg width="600" height="100" class="svg">< ...

javascriptjqueryhtmlangularjs

What is the process for publishing an npm package to a Nexus group repository?

After installing Nexus Repository Manager OSS version 3.2.1, I successfully ran it on my local machine. Setup Within Nexus, I have set up three NPM repositories: [PUBLIC] - acting as a proxy for the public npm registry [PRIVATE] - designated for my own ...

javascriptnpmnexusdevopspackage.json