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>

Tim Down · Accepted Answer

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

Disabling <img> selection and resize inside a contentEditable DIV in IE 9

Tags:

javascript

internet-explorer-9

contenteditable

erlloyd

1 Answers

Tim Down

Recent Activity

Donate For Us