3

I am pretty new to JavaScript and hope someone here can help me with the following:

Primarily looking for a solution in IE 8 - if it can cover other browsers / versions even better. I have a page with only one contenteditable div that is created dynamically and contains both text and HTML tags. On the page I want to add a button that inserts certain text at the cursor position into this div.

So far I have the following code which works fine as long as I select a text in the div but if I just position my cursor there without selecting anything it inserts my text outside the div.

How can I get it to add my text always at the cursor position the same way it does now at the selection position ? (I don't even need it to replace a selection as it would only be required at the cursor position. Also, this would only be required for one specific div.)

My Code: 

<html>
<head>
<script type="text/javascript">
    function test()
    {
        var input = "TEST";
        document.selection.createRange().pasteHTML(input);
    }
</script>

</head>
<body>
    <div id="myDiv" contenteditable>This is a test text.</div><br />
    <button type="button" onclick="test()">Test</button>
</body>
</html>

Thanks for any help with this, Tim

user2571510
  • 11,167
  • 39
  • 92
  • 138

1 Answers1

7

Your problem is that the <button> element steals the focus and destroys the selection by the time the click event has fired in IE. You could make the <button> unselectable, which would prevent it being able to receive focus. This is done using the unselectable attribute in IE:

<button type="button" unselectable="on" onclick="test()">Test</button>

Demo: http://jsbin.com/aqAYUwu/5

Another alternative which is less good in my view is to use the mousedown event instead and prevent the default action:

<button type="button" unselectable="on"
    onmousedown="test(); return false">Test</button>

You can find a cross-browser function to insert HTML at the current cursor position in a contenteditable element here:

https://stackoverflow.com/a/6691294/96100

One final note: contenteditable isn't a boolean attribute so strictly speaking you should give it a value (i.e. <div contenteditable="true">), although <div contenteditable> does work in all browsers I've tried it in.

Community
  • 1
  • 1
Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • Thanks for this. The comments and links are very helpful even though it still seems to lose focus and inserts the text above my div (it still works fine when i have selected a text part before). Is there maybe a way I can force it to insert into a specific div to avoid this ? – user2571510 Oct 28 '13 at 11:13
  • 1
    @user2571510: Does the the JSBin link not work properly for you? It's fine in IE 7 for me. – Tim Down Oct 28 '13 at 14:26
  • Thanks, Tim. You are right regarding a button getting focus. My problem here is that the button in question is inside a Bootbox dialog (like a prompt box) and there the button only has a class but no id so i dont know how to add the unselectable attribute to it. – user2571510 Oct 28 '13 at 20:28
  • @user2571510: You could get hold of it by class name and add the `unselectable` attribute. Since you've tagged this question as jQuery, you could use something like `$("button.someClass").attr("unselectable", "on");`. – Tim Down Oct 29 '13 at 09:29
  • `unselectable` saved my life – Daria Jan 19 '17 at 13:55