利用contenteditable解决容器宽度动态自适应

定义和用法

contenteditable 属性指定元素内容是否可编辑。

注意： 当元素中没有设置 contenteditable 属性时，元素将从父元素继承。

应用场景：

利用此属性解决动态输入时，容器宽度自适应内容长度的问题。

问题背景：

最开始使用input，在后期调整样式时，发现无法用CSS根据内容实时变化宽度，导致文字过长时会有遮盖问题；接着尝试用JS控制宽度，开发中发现难以掌握变化时机。

解决方案：

将HTML5的contenteditable置为true，非input的标签内容也可进行编辑，而将input替换成div标签后，就可以用纯CSS来完成宽度自适应内容。

延伸问题：

1、内容为空时，无法选中再次编辑。

解决方案：监听blur事件，内容为空时，自动填充默认提示文案，即不让标签内容为空。

2、如果采用问题1的解决方案，实际内容与用户输入并不一致，在后期进行保存时，处理麻烦。

解决方案：利用 :empty 伪类选中没有子元素的元素，再将::before的content内容为默认文案，实现类似input的placeholder效果。