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=".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=".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./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>
2 Answers
Reset to default 2Here'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 bees 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/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();
}
};
}
To prevent resizing of your images the onresizestart event handler should be set on the contenteditable container. It doesn't remove the handles but it does remove the possibility to resize the elements.
see: https://stackoverflow./a/11878624/1491212
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745366839a4624619.html
评论列表（0条）