禁用<img>选择并在IE 9中的contentEditable DIV内调整大小

Question

禁用<img>选择并在IE 9中的contentEditable DIV内调整大小

erl*_*oyd 6 javascript contenteditable internet-explorer-9

我正在开发一个项目,试图使用contentEditable DIV实现一些编辑功能.我们现在正在尝试添加对IE9的支持(在最初提供Chrome/Safari支持之后)并且它被证明是一个挑战.

我们在Chrome中可以做的是<img>在内容可编辑div中包含对象,并允许<img>拖放这些元素,但不调整大小.此外,在contentEditable div中按TAB不应该选择<img>

在IE 9中,我发现了一些停止调整图像大小的方法(比如只允许在contentEditable <div>中移动<img> s)但是在单击图像时仍然显示那些darn调整大小句柄.我的大问题是在IE 9中,当我在contenteditable div中输入内容时,我点击了TAB,我希望浏览器选择网页上的下一个项目(在我们的应用程序中,它是另一个contentEditable div).这适用于Chrome,但在IE中,当我点击TAB时,<img>会选中(显示调整大小的句柄)

有没有人知道是否有办法禁用IE 9中的"使用选项卡选择"功能？

这是一个简单的测试用例,禁用调整大小,仍然允许拖放,但<img>仍然通过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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Tim*_*own 2

这是您的起点。它并不理想（特别是粗暴的鼠标向下/向上检测），但它基本上可以检测何时通过非鼠标方式使用调整大小手柄（“控制选择”；有关更多详细信息，请参阅MSDN）选择内容可编辑元素中的图像并将焦点移动到另一个可内容编辑的元素（在示例中是硬编码的）。它适用于 IE 7；我还没有在 IE 9 中测试过，但我希望它能工作。

现场演示：http://jsfiddle.net/5BGxT/3/

代码：

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，1 月前
查看次数：	6342 次
最近记录：	13 年，4 月前