禁用 IE 9 中 contentEditable DIV 内的选择和调整大小

发布于 2024-12-13 15:28:03 字数 1936 浏览 1 评论 0原文

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

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

在 IE 9 中，我找到了一些阻止图像调整大小的方法（例如仅允许在 contentEditable 中移动

），但即使如此，在单击图像时仍然会显示那些该死的调整大小手柄。我的大问题是，在 IE 9 中，当我在 contenteditable div 中输入内容并按 TAB 时，我希望浏览器选择网页上的下一个项目（在我们的应用程序中，它是另一个 contenteditable div）。这在 Chrome 中有效，但在 IE 中，当我点击 TAB 时，会选择（显示调整大小手柄）

有谁知道是否有办法禁用“选择” IE 9 中的选项卡功能？

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

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

美人迟暮 2024-12-20 15:28:03

这是您的起点。它并不理想（特别是粗暴的鼠标向下/向上检测），但它基本上可以检测何时使用调整大小手柄选择内容可编辑元素中的图像（“控制选择”；请参阅 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();
        }
    };
}

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

回复收藏 0 原文