最近在写自己个人网站时，发布文章功能需要一个添加标签组件。点击加号，输入文本。而这里的input就需要宽度根据内容自适应。百度搜大多是这两种方法，结果都不是很理想。

// 方法一

changeWidth(e) {

let input = document.getElementById("myInput");

const l = input.value.length;

input.style.width = (l+1) * 15 + "px";

}

// 方法二

changeWidth(e) {

let input = document.getElementById("myInput");

input.size = input.value.length > 4 ? input.value.length : 4; // 这里input需要给个size属性

}

不理想的原因皆是：输入英文字符满足需求，输入中文字符则增加的宽度不固定

最后使用了h5的contenteditable属性很简单的解决了这个需要

class="my-input"

contenteditable="true"

>