前端设置input输入框宽度固定，高度随输入内容变高

66 阅读 0 评论 44 点赞

我是靠谱客的博主深情可乐，最近开发中收集的这篇文章主要介绍前端设置input输入框宽度固定，高度随输入内容变高，觉得挺不错的，现在分享给大家，希望可以做个参考。

局限1：input只能控制输入内容为一行；textarea需要手动拖动改变大小。

实现：像 div, p这样的块元素默认是不可编辑的，但我们可以在标签内添加 contenteditable 属性设置为 true, 使其变为可编辑的。

contenteditable是一个全局属性，用于指示元素是否可被用户编辑，属性值可选true，false，空字符串。

局限2：设置contenteditable之后不能使用v-model双向绑定。
解决：使用v-html和@blur解决


<p contenteditable="true"
v-html="name"
@blur="name=$event.target.innerText"></p>

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。