Question

我参加了一个利用内容表DIV实施一些编辑特征的项目。我们现在重新努力增加对E9的支持(在提供 Chrome/Safari支持之后),并证明这是一个挑战。

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>

在E9,我发现了一些阻止图像再复制的方法(如)。允许迁移的只是“带”;锡克和特的;内容Editable <div>的;,但即使这仍然显示,在点击图像时,这些收入转作处理。我的重大问题是,在9月,我打上了内容不容置疑的四肢,我打着TAB,我希望浏览器在网页上选择下一个项目(在我们的申请中,这是另一个内容可变的四)。在 Chrome,但在IE,当我打过TAB时,选择了<img>(转基因处理显示情况)。

是否有任何人知道,利用E 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

这里是你们的起点。它不理想(特别是重压下层/顶级探测),但基本上通过非吸烟手段,在选用内容转换元素图像时(即“控制选择”;见,更多细节),并将重点转移到另一个内容不容改动的内容(例如硬编码)。它在第7号国际调查中工作;我在第9号国际调查中进行了检测,但我预计会这样做。

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

Answer 2

为防止对你的图像进行再造,请在<条码>上打上<>条码>。它没有去掉处理器,但它确实排除了转清这些部件的可能性。

见。

友情链接