input/textarea输入框不能自适应高度,使用contenteditable代替

每日鸡汤:每个你想要学习的念头都是未来的你向自己求救

input 输入框不能换行,你可能会想使用textarea代替,但是textarea有一个问题就是高度不能根据内容自适应,就很烦人。

有的时候我们希望,展示可以编辑的内容的元素,随着内容变化而自适应高度,这个时候就可以考虑使用 contenteditable 这个属性,然后用在div元素上就行,div等快元素是可以自适应高度的,然后加上 contenteditable ,就可以编辑了!

全局属性 contenteditable 是一个枚举属性,表示元素是否可被用户编辑。如果可以,浏览器会修改元素的组件以允许编辑。

这个属性的兼容性也还不错!

input/textarea输入框不能自适应高度,使用contenteditable代替_第1张图片

但是有一个问题就是设置了contenteditable = true的元素,可以编辑了,但是无法使用vue中的v-model实现响应式!

所以我们需要手动实现,使用v-html +  input 事件就可以模拟v-model

参考

contenteditable的元素如何实现“双向绑定”? - 掘金

你可能感兴趣的:(前端)