The input/textarea input box cannot adapt to the height, use contenteditable instead

Chicken Soup of the Day: Every thought you want to learn is your future self asking for help

The input input box cannot wrap, you may want to use textarea instead, but the problem with textarea is that the height cannot be adapted according to the content, which is very annoying.

Sometimes we hope that the elements that display editable content can adapt to the height as the content changes. At this time, we can consider using the contenteditable attribute, and then use it on the div element. Fast elements such as div can adapt to the height , and then add contenteditable, you can edit!

The global property contenteditable  is an enumerated property that indicates whether the element can be edited by the user. If it can, the browser modifies the element's components to allow editing.

The compatibility of this attribute is not bad!

But there is a problem with settingcontenteditable = true的元素，可以编辑了，但是无法使用vue中的v-model实现响应式！

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

参考

How do contenteditable elements achieve "two-way binding"? - Nuggets