contenteditable on doubleclick

Question

I've got a p tag with some text, and I'm trying to make it contenteditable but only on doubleclick. How can I prevent browser from placing the cursor on the p when I click on it and only do it when I doubleclick? JQuery:

    p.dblclick(function(e){
        p.css("cursor", "text");
    })
    .focusout(function(){
        p.css("cursor", "default");
    })
    .click(function(e){
        console.log('focus p');
        e.stopPropagation();
        $("body").focus(); // not stopping Chrome from placing cursor
    });

I could make contenteditable false by default and then make it true on dbleclick and then do p.focus() but it means I can't place cursor where I clicked. On the other hand, I could make it contenteditable after first click and then wait like 1.5s for a dobuleclick and if it didn't happen cancel it, but if it happened, then the content would be editable and the second click would trigger the placement of the cursor in the right place. However, it's not that smooth and makes the content editable for these 1 and a half seconds.

Any ideas?

answer: In case somebody is interested, I went on to implement the timer method, because I don't think there's any other way... here's the code

var DELAY = 700, clicks = 0, timer = null;
p.focusout(function(){
    p.css("cursor", "default");
    p.prop("contenteditable", false);
})
.click(function(e){
    clicks++;
    p.prop("contenteditable", true);
    if(clicks == 1){
        timer = setTimeout(function() {
            p.prop("contenteditable", false);
            //alert("Single Click");  //perform single-click action
            clicks = 0;             //after action performed, reset counter
        }, DELAY);
    } else {
        clearTimeout(timer);    //prevent single-click action
       // alert("Double Click");  //perform double-click action
        clicks = 0;             //after action performed, reset counter
    }

});

Answer 1

try this here a working fiddle

 <p ondblclick="this.contentEditable=true;this.className='inEdit';" onblur="this.contentEditable=false;this.className='';" contenteditable="false" class="">This paragraph uses some simple script to be editable. Double-click the text to begin editing.</p>

Answer 2

Here is a solution which works for me:

<script>
function listenForDoubleClick(element) {
  element.contentEditable = true;
  setTimeout(function() {
    if (document.activeElement !== element) {
      element.contentEditable = false;
    }
  }, 300);
}
</script>

<p onclick="listenForDoubleClick(this);" onblur="this.contentEditable=false;">Double-click the text to begin editing.</p>

Here is a working fiddle: https://jsfiddle.net/dtL3xzfb/

It uses a timeout event to check if the text has been selected within a certain period of time (300ms), if the text is not selected (by a second click) it will set content editable to false again: The content editable parameter is set to true after the first click so text will be selected when you click for a second time.

Answer 3

You could make the text unselectable as in How to disable text selection using jQuery? :

var p = $('p');

p.attr('unselectable', 'on')
    .css('user-select', 'none')
    .on('selectstart', false);

p.dblclick(function (e) {
    p.css("cursor", "text")
        .attr('contenteditable', true)
        .attr('unselectable', 'off')
        .css('user-select', 'inherit')
        .off('selectstart', false)
        .focus();

});

p.focusout(function () {
    p.css("cursor", "default")
        .attr('unselectable', 'on')
        .attr('contenteditable', false)
        .css('user-select', 'none')
        .on('selectstart', false);
});

Answer 4

If using React you may use the component

import _ from 'lodash'
import { useState } from 'react'

const inputValue = (e: any): string => e.target.value

function isEnterOrEscapeKeyEvent(event: React.KeyboardEvent<HTMLInputElement>) {
    return event.key === 'Enter' || event.key === 'Escape'
}

const EditOnDblClick = () => {
    const [isEditing, setisEditing] = useState(false)
    const [text, settext] = useState('yoga chitta')

    const onEditEnd = () => {
        setisEditing(false)
    }

    return isEditing ? (
        <input
            value={text}
            className="bg-transparent border-2 border-black border-solid"
            onKeyDown={(event) => {
                if (isEnterOrEscapeKeyEvent(event)) {
                    event.preventDefault()
                    event.stopPropagation()
                    onEditEnd()
                }
            }}
            onChange={_.flow(inputValue, settext)}
            onBlur={onEditEnd}
            autoFocus
        />
    ) : (
        <div className="select-none" onDoubleClick={() => setisEditing(true)}>
            {text}
        </div>
    )
}

export default EditOnDblClick

Note: Classes are from tailwindcss