How can i set html in javascript to specific location in element

Question

I have a div just like this

<div contenteditable="true" >
 Hello this is content editable.... [cursor is blinking here] and more text
</div>

How can i set a data where cursor is blinking.

Thanks in advance.

T.J. Crowder · Accepted Answer · 2015-11-08 10:35:33Z

2

You use execCommand with the insertHTML command:

document.execCommand("insertHTML", false, "the HTML to insert");

Live Example:

$("div").on("keydown", function(e) {
  if (e.ctrlKey && e.which == 81) {
    document.execCommand("insertHTML", false, "<strong>inserted</strong>");
    return false;
  }
});

<p>Put your cursor in the relevant location below, then press Ctrl+Q:</p>
<div contenteditable="true">
 Hello this is content editable....  and more text
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Sadly this doesn't seem to work on IE11. :-| For cross-browser support, you might look at Tim Down's rangy library.

edited Nov 8, 2015 at 10:35

answered Nov 8, 2015 at 10:03

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ilyas karim Over a year ago

I am sure that no one uses Internet Explorer sir.

T.J. Crowder Over a year ago

@mplungjan: Doh! And here I was going for something innocuous. Anything innocuous on OSX?

Collectives™ on Stack Overflow

How can i set html in javascript to specific location in element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related