我如何将javascript中的html设置为元素中的特定位置

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.

Answer 1

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 .