如何使用 contentEditable 和大小样式删除调整大小手柄和 div 边框
Posted
技术标签:
【中文标题】如何使用 contentEditable 和大小样式删除调整大小手柄和 div 边框【英文标题】：How to Remove Resize handles and border of div with contentEditable and size style 【发布时间】：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>
【问题讨论】：
***.com/questions/1926525/… 的副本？ 需要with和height样式，所以和上题不一样。此外，不接受仅禁用调整大小句柄 How to disable elements selection and resizing in contenteditable div?的可能重复 【参考方案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>
【讨论】：
以上是关于如何使用 contentEditable 和大小样式删除调整大小手柄和 div 边框的主要内容，如果未能解决你的问题，请参考以下文章
如何在具有 contentEditable 的元素上启用“可拖动”？
如何使用 jQuery 在 contenteditable div 中移动插入符号？
如何使用flex包装contenteditable div中的长行