禁用& lt; img>在ie9中选择和调整可内容DIV的大小

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

本文关键字：DIV 调整 选择 img lt ie9 禁用      更新时间：2023-09-26

我正在做一个项目，试图使用一个可内容的div实现一些编辑功能。我们现在正试图添加对IE9的支持(在最初提供Chrome/Safari支持之后)，这被证明是一个挑战。

我们能够在Chrome中做的是在一个内容可编辑的div中有<img>对象，并允许这些<img>元素被拖放，但不调整大小。另外，在contentitablediv中按TAB不能选择<img>

在ie9中，我发现了一些阻止图像被调整大小的方法(比如只允许在contentEditable

内移动s)，但即使这样，当点击图像时仍然会显示那些讨厌的调整大小处理。我最大的问题是，在ie9中，当我在contentitablediv中输入时，我按TAB键，我希望浏览器选择网页上的下一个项目(在我们的应用程序中，它是另一个contentitablediv)。这在Chrome中工作，但在IE中，当我按TAB键时，<img>被选中(显示调整大小句柄)

有没有人知道是否有一种方法可以在ie9中禁用"使用选项卡选择"功能?

下面是一个简单的测试用例，它禁用了调整大小，仍然允许拖放，但是<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>

这是一个起点。这不是理想的(特别是笨重的鼠标向下/向上检测)，但它基本上可以检测到当一个可满足元素中的图像被选择为调整大小手柄("控制选择";请参阅MSDN了解更多细节)，并将焦点移动到另一个可满足内容的元素(在示例中是硬编码的)。它可以在IE 7中工作;我还没有在ie9中测试过，但我希望它能工作。

实时演示: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();
        }
    };
}

为了防止调整图像的大小，应该在contenteditable 容器上设置onresizestart事件处理程序。它没有删除句柄，但它确实删除了调整元素大小的可能性。

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

相关文章：