如何自动调整内容可编辑元素的大小
How to autosize contenteditable element?
这是我的内容可编辑元素:
#editor {
width: 200px;
height: 30px;
border: 1px solid red;
overflow: hidden;
}
<div id="editor" contenteditable="true"></div>
我希望它可以根据用户的内容自动调整大小。我试着听keyup
事件:
editor.addEventListener("keyup", function (){
newheight = editor.scrollHeight;
editor.style.height = newheight + "px";
})
当div 变高时,这可能有效,但当用户删除所有内容时,div 不能更短。
如何让它自动调整大小?
在这里演示
将"display: inline-block;"添加到CSS中,并在宽度和高度中添加"min-"。
您的 DIV 将自动增加内部 HTML 内容。
<html>
<style type="text/css">
#Test
{
display: inline-block;
min-width: 30px;
min-height: 30px;
border: 1px solid red;
overflow: hidden;
}
</style>
<div id="Test" >
Nothing But Bigger
And <br />
Taller
</div>
</html>
看看这个小提琴:演示
这工作正常...
您只需在代码中使用以下 HTML 标记
<div contenteditable="true" style= "border: 1px solid red; min-height:30px;width:200px"></div>
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 将事件聚焦/模糊在可编辑内容的元素上
- 一个页面上有多个Ace编辑器,没有预先设置元素
- jQuery/Javascript在内容可编辑的当前段落后插入元素
- 如何删除包含内容可编辑跨度的整个跨度元素
- javascript正则表达式,用于编辑元素内部的css样式属性
- 在此内容可编辑元素中获取当前行和行索引
- 为什么触发点击内容可编辑不会激活元素和设置光标
- 我在Phaser有一个项目.我想在画布上的元素上做一个用户图像编辑器
- ContentEditable元素--将光标移回可编辑文本的开头
- 如果AngularJS中有可编辑的表行,那么表单元素放在哪里
- 如何设置元素的占位符文本 我无法编辑 HTML 并且 ID 正在更改
- 如何通过元素选择器获取tinyMCE编辑器实例
- “;idd”;html中的属性?编辑:我可以使用Javascript获得基于自定义属性的元素吗
- 在inspect元素上编辑HTML时刷新Chrome DOM
- 双击以编辑Meteor应用程序中的元素
- JAVASCRIPT - 在动态创建的编辑框中拦截键码 13(输入)并将元素传递给不同的函数
- 防止文本在内容可编辑元素中突出显示时被删除
- 如何防止用户在内容可编辑元素中键入新行
- 如何自动调整内容可编辑元素的大小