javascript - 防止 IE 中 contenteditable div 中按钮的大小调整

Question

我们有一个样式化的禁用输入，类型为按钮，我们将其用作内容可编辑区域中其他内容的占位符。问题是 IE(我们专门针对 IE10)似乎完全忽略了 resizestart 事件，因此当您单击该元素时，您可以调整它的大小。我们希望防止这种情况发生，但仍然允许选择和拖动元素。这似乎确实适用于图像。

这里选择元素背后的故事很长，所以现在假设我们无法更改元素。

更新: 这是 jsfiddle在此演示问题和相关示例代码:

<div contenteditable="true">
    <input type="button" value="test" disabled="disabled" onresizestart="return false;" onresize="return false;" id="test" />
</div>

Answer 1

这远非理想，但可行。您可以捕获容器的“mouseup”事件并在那里重置控件的宽度和高度:

$('#container').mouseup(function(e){
    var $btn = $("#test");
    $btn.css('width','');
    $btn.css('height','')
})

这不会删除调整大小的方 block ，并且视觉上用户可以暂时调整控件的大小，但一旦释放鼠标按钮 - 控件就会捕捉到原始大小。

演示:http://jsfiddle.net/5swkeqh9/2/