How to Remove Resize handles and border of div with contentEditable and size style

拟墨画扇 提交于 2020-01-11 10:12:08

问题


The problem I'm having is with the contentEditable attribute in IE. The problem is that I'm getting resize handles, and a thick border around elements when they're in focus. The styles for with, height and display are needed. Any idea of how to remove them? CSS or Javascript

A simple example:

<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>

回答1:


Do You need contentEditable="true" defined twice ? If You delete the first one, the resize handles go away, although the functionality remains.

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




回答2:


We can wrap the outer div with contenteditable value as false to take away the resize handles. Below the the updated 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>


来源:https://stackoverflow.com/questions/6772342/how-to-remove-resize-handles-and-border-of-div-with-contenteditable-and-size-sty

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!