All geek questions in one place

Disabling <img> selections and resizing inside contentEditable DIV in IE 9

I am working on a project that is trying to implement some editing features using the contentEditable DIV. Now we are trying to add support for IE9 (after the initial support for Chrome / Safari), and this becomes a problem.

What we can do in Chrome, there are <img> objects inside the resolvable div content and allow these <img> elements to drag / drop, but not resize. Also, pressing TAB in the contentEditable element should not select <img>

In IE 9, I found several methods for stopping images (for example, Allow moving only <img> s within the contentEditable <div> ), but even this still shows this ink for resizing when you click on the image. My big problem is that in IE 9, when I print inside the contenteditable div and I press TAB, I want the browser to select the next element on the web page (in our application this is another contentEditable div). This works in Chrome, but in IE, when I press TAB, <img> is selected (when resizing handles appear)

Does anyone know if there is a way to disable the "tab select" functionality in IE 9?

Here's a simple test case that disables resizing, still allows drag and drop, but <img> is still selectable 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>
+6
source share
2 answers

Here is the starting point for you. It is not ideal (in particular, the detection of a convulsive mouse up / down), but mainly detects when the image in the content element becomes selected using the resizing knobs ("control selection", see MSDN for more details) using non-muscular funds and moves the focus to another element corresponding to the content (hardcoded in the example). It works in IE 7; I did not test in IE 9, but I would expect it to work.

Live demo: http://jsfiddle.net/5BGxT/3/

the 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(); } }; }
+2
source

To prevent the resizing of your images, the onresizestart event onresizestart must be installed in the contenteditable container . It does not remove handles, but it removes the ability to resize elements.

see below: fooobar.com/questions/570305 / ...

0
source

Source: https://habr.com/ru/post/900650/

More articles:


All Articles