Question

我正在尝试使用contentEditable DIV实现某些编辑功能的项目。我们现在正在尝试添加对IE9的支持（在最初提供Chrome / Safari支持后）并且它被证明是一个挑战。

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

在IE 9中，我发现了一些停止调整图像大小的方法（如Permitting moving only of <img>s within contentEditable <div>），但即便如此，单击图像时仍会显示这些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>

Answer 1

这是您的起点。这不是理想的（特别是严格的鼠标向下/向上检测），但它确实基本上检测何时通过调整大小手柄（“控制选择”;有关详细信息，请参阅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();
        }
    };
}

Answer 2

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

请参阅：https://stackoverflow.com/a/11878624/1491212

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

2 个答案: