如何用 div 的 contenteditable 属性实现自动伸缩的输入框？

自动变长输入框，让文字自由伸展

如何实现输入框随文字长度自动伸缩，并在超过行宽时自动换行的效果呢？

一位大神给出了一个巧妙的方案，利用了 div 的 contenteditable 属性。

代码如下：

<div class="input-container">
    你好，
    <div class="auto-expand" contenteditable="true">111</div>
    请下午来开会
</div>

.input-container {
    width: 200px;
}
.auto-expand {
    display: inline;
    word-break: break-all;
    word-wrap: break-word;
    border: 1px solid black;
}

• 设置 .input-container 的宽度来限制输入框的总体宽度。
• 使用 .auto-expand div 作为可编辑区域，并设置 contenteditable 属性为 true。
• 设置 display: inline; 使输入框与其他元素同处一行。
• 设置 word-break: break-all; word-wrap: break-word; 使文字在达到行宽时自动换行。
• 可选：添加边框来显示输入框区域。

这样，输入框的内容就会随着文字长度的变化而自动伸缩，在达到行宽时还会自动换行，呈现出自然流畅的效果。

以上就是如何用 div 的 contenteditable 属性实现自动伸缩的输入框？的详细内容，更多请关注其它相关文章！