我创建了一个contentEditable的div,用作富文本框。它周围有调整大小的处理程序,我想摆脱它们。你有任何想法吗?
编辑:这似乎是因为我绝对定位了div,所以Firefox会向元素添加一个令人恼火的_moz_resize属性,我无法关闭它。
我创建了一个contentEditable的div,用作富文本框。它周围有调整大小的处理程序,我想摆脱它们。你有任何想法吗?
编辑:这似乎是因为我绝对定位了div,所以Firefox会向元素添加一个令人恼火的_moz_resize属性,我无法关闭它。
顺便提一下,你可以通过向文档发送(有些文档描述不太清晰的)enableObjectResizing
命令来禁用Firefox的自动调整大小功能:
document.execCommand("enableObjectResizing", false, false);
据我所知,只有在文档加载完成后才能安全地进行此操作,并且我不知道如何禁用抓取器,因为它是一个独立的功能。
看起来我可以通过添加一个包装 div 并绝对定位包装 div,然后将内部的 div 设为可编辑来解决这个问题。
document.execCommand("enableObjectResizing", false, false);
,但是移动图标仍然出现。解决我的问题的方法只是在onmousedown
事件发生时使用e.preventDefault()
。element.onmousedown = function(e){
e.preventDefault();
}
execCommand
,就像ZoogieZork所回答的那样。mouseup
上被选择为文本。mouseup
将导致选择图像。oncontrolselect
设置为返回false
确实可以防止出现那些手柄,你可以通过将以下处理程序附加到mousedown
事件来巧妙地实现此目的。function (evt) {
var img;
function returnFalse() {
return false;
}
if (evt.tagName.toLowerCase() === "img") {
img = evt.target;
img.oncontrolselect = returnFalse;
}
}
function (evt) {
if (evt.target.tagName.toLowerCase() === "img") {
selectSingleNode(img); // In my case, I used Rangy
}
}
function (evt) {
if (evt.target.tagName.toLowerCase() !== "img") {
return;
}
window.setTimeout(function () {
selectSingleNode(img); // In my case, I used Rangy
}, 0);
}
在Internet Explorer 7到11中,我附加了一个处理程序到dragend
,以删除所有选择:
function (evt) {
if (evt.target.tagName.toLowerCase() === "img") {
deselect(); // I use Rangy for this, as well
}
}
... 这就是最好的修复方法
<div contenteditable="true">
<label contenteditable="false"><input/></label>
</div>
或任何包裹您的输入/图像的HTML元素
在IE11上运行得非常好
contenteditable
时,在IE11中看到调整大小手柄,但无法正常工作。 - vsync你尝试过添加样式吗?
border: none;
到 div 中吗?