Disabling selection and resize inside a contentEditable DIV in IE 9

Question

I'm working on a project that's trying to implement some editing features using a contentEditable DIV. We're now trying to add support for IE9 (after initally providing Chrome/Safari support) and it's proving to be a challenge.

What we are able to do in Chrome is have <img> objects inside a content editable div, and allow those <img> elements to be dragged/dropped, but not resized. Additionally, pressing TAB in the contentEditable div should not select the <img>

In IE 9, I have found some methods for stopping the images from being resized (like Permitting moving only of <img>s within contentEditable <div>) but even that still shows those darn resize handles when clicking on an image. My big problem is that in IE 9, when I'm typing inside the contenteditable div, and I hit TAB, I want the browser to select the next item on the web page (in our application, it is another contentEditable div). This works in Chrome, but in IE, when I hit TAB, the <img> is selected (with the resize handles showing up)

Does anyone know if there is a way to disable the 'selection using tab' functionality in IE 9?

Here's a simple test case that disables the resizing, still allows drag-and-drop, but the <img> is still selected via TAB:

<html>
  <head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
  $(document).ready(function() {

  //This line below doesn't work in IE9
  //document.execCommand("enableObjectResizing", false, false);

    $('img', '#edit').each(function (i, item) {
        item.attachEvent("onresizestart", function(e) {
            e.returnValue = false; 
        }, false);

        //I thought this below might work for disabling selection, 
        // but it doesn't...
        item.attachEvent("onbeforeeditfocus", function(e) {
            e.returnValue = false;
        }, false);
    });   
  });
</script>

  </head>
  <body>

    <div id="edit" contenteditable="true">
      Here is some text, and also an <img src="http://img841.imageshack.us/img841/1747/imagead.png" /> image
    </div>

  </body>
</html>

score 2 · Accepted Answer · answered Nov 02 '11 at 23:30

Here's a starting point for you. It's not ideal (particularly the heavy-handed mouse down/up detection) but it does basically detect when an image in a contenteditable element becomes selected with resize handles (a "control selection"; see MSDN for more details) via non-mouse means and moves the focus to another contenteditable element (hard-coded in the example). It works in IE 7; I haven't tested in IE 9 but I would expect it to work.

Live demo: http://jsfiddle.net/5BGxT/3/

Code:

if (document.selection && "onselectionchange" in document) {
    // Ensure image can be resized when clicked on
    var mouseDown = false;

    document.getElementById("one").onmousedown = function() {
        mouseDown = true;
    };

    document.getElementById("one").onmouseup = function() {
        mouseDown = false;
    };

    document.onselectionchange = function() {
        var sel = document.selection;
        if (!mouseDown && sel.type == "Control" &&
                sel.createRange().item(0).tagName == "IMG") {
            var nextEditableEl = document.getElementById("two");
            nextEditableEl.focus();
        }
    };
}

This does seem to work in IE9. Even though, like you said, it is heavy-handed, it also appears to be the only way I've seen to get the functionality I'm looking for in IE9. Thanks for the quick response! — erlloyd, Nov 03 '11 at 13:17

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

To prevent resizing of your images the onresizestart event handler should be set on the contenteditable container. It doesn't remove the handles but it does remove the possibility to resize the elements.

see: https://stackoverflow.com/a/11878624/1491212

edited May 23 '17 at 12:12

Community

1
1

answered Aug 09 '12 at 07:31

Armel Larcier

15,747
7
68
89

Disabling selection and resize inside a contentEditable DIV in IE 9

2 Answers2