如何使用 contentEditable 和大小样式删除调整大小手柄和 div 边框答案

【问题标题】：How to Remove Resize handles and border of div with contentEditable and size style如何使用 contentEditable 和大小样式删除调整大小手柄和 div 边框
【发布时间】：2011-10-09 23:35:52
【问题描述】：

我遇到的问题是 IE 中的 contentEditable 属性。问题是我得到了调整大小的句柄，当它们成为焦点时，元素周围的边框很粗。需要 with、height 和 display 的样式。知道如何删除它们吗？ CSS 或 Javascript

一个简单的例子：

<html>
<head>
</head>

<body>

<div contentEditable="true" style="width: 50%; height: 50%; display: table" >
<div contentEditable="true" style="width: 50%; height: 50%; display: table-cell">
<p>aaa</p>
</div>
</div>

</body>
</html>

【问题讨论】：

stackoverflow.com/questions/1926525/… 的副本？
需要with和height样式，所以和上题不一样。此外，不接受仅禁用调整大小句柄
How to disable elements selection and resizing in contenteditable div?的可能重复

标签： javascript html css internet-explorer contenteditable

【解决方案1】：

你需要 contentEditable="true" 定义两次吗？如果您删除第一个，则调整大小手柄会消失，但功能仍然存在。

http://jsfiddle.net/2uphD/1/

【讨论】：

【解决方案2】：

我们可以将带有 contenteditable 值的外部 div 包装为 false 以移除调整大小的句柄。下面更新jsfiddle

<div>
<div contentEditable="false" style="width:50%; height:50%; display:table" >
    <div contentEditable="true" style="width:50%; height:50%; display:table-cell" >  
        <p>div1</p> 
    </div>  
</div>

<div contentEditable="false" style="width:50%; height:50%; display:table" >
    <div contentEditable="true" style="width:50%; height:50%; display:table-cell" >  
        <p>div2</p> 
    </div>  
</div>

【讨论】：

【解决方案3】：

你应该使用 resize: none 来禁用处理程序：

<div 
  contenteditable
  style="max-height:200px;resize: none">
</div>

而且这种样式可以禁用焦点边框：

<style>
[contenteditable]:focus {
    outline: 0px solid transparent;
}
</style>

【讨论】：