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

Question

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);
        }
    });
});

score 3 · Answer 1 · answered Apr 21 '16 at 19:36

3

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>

answered Apr 21 '16 at 19:36

Gary S.

146
5

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. – Max Koretskyi Apr 21 '16 at 19:42
Not sure if this answers the exact same question, but it may help http://stackoverflow.com/questions/1181700/set-cursor-position-on-contenteditable-div?rq=1 – Gary S. Apr 21 '16 at 20:15
Unfortunately it doesn't answer this question, thanks for bothering to lookup – Max Koretskyi Apr 22 '16 at 13:14
@AngularInDepth.com Did you ever find a solution for this? I'm trying to achieve the same thing. – Pascal Lindelauf Sep 08 '17 at 11:56
@PascalLindelauf, unfortunately no – Max Koretskyi Sep 08 '17 at 14:09

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

1 Answers1