CODEWITHSUNDEEP
javascriptjqueryhtml
Max Koretskyi
Max Koretskyi

Reputation: 105449

Why triggering click on contenteditable doesn't activate element and set cursor

I want contenteditable to become active with cursor on the simulated click event, however this doesn't happen - the element doesn't get activated. Why? I need to put a cursor at exactly the same position as the user clicked, that's why I'm using click event since it contains coordinates.

I've created this simple setup to demonstrate the problem (click inside the contenteditable div):

HTML

<div contenteditable="true" style="width: 100px; height: 100px; border: 1px solid black;">some text</div>

JS

$(function() {
    var editable = $('[contenteditable]');
    var event, initial = true;
    editable.on('click', function(e) {
        event = e;
        console.log('writing event', event);

        if (initial) {
            initial = false;
            editable.blur();
            setTimeout(function() {
                console.log('trigger click');
                editable.trigger(e);
            }, 3000);
        }
    });
});

Upvotes: 3

Views: 2109

Answers (1)

Gary S.
Gary S.

Reputation: 146

I believe you are looking to trigger the focus event, which will place a cursor in the box and allow you to edit the content, without having to actually click inside the div. Is that what you were looking to do?

$(function() {
  var editable = $('[contenteditable]');
  setTimeout(function() {
    editable.trigger('focus');
  }, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" style="width: 100px; height: 100px; border: 1px solid black;">some text</div>

Upvotes: 3

Related Questions