方法一：CSS + Javascript实现
在HTML中定义element，同时定义并注册oninput事件
在CSS中定义样式
.number-input1{
font-family: inherit;
font-size: inherit;
}
.input-sizer {
display: inline-grid;
vertical-align: top;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
font-family: inherit;
font-size: inherit;
}
.input-sizer::after
{
content: attr(data-value) " ";
visibility: hidden;
font-family: inherit;
font-size: inherit;
white-space: pre-wrap;
}
方法二：纯Javascript实现
在HTML中定义element，注册oninput事件
在Javascript中定义oninput事件
setWidthByContent = (self, font = null) => {
// re-use canvas object for better performance
const canvas = setWidthByContent.canvas || (setWidthByContent.canvas = document.createElement("canvas"));
const context = canvas.getContext("2d");
context.font = font || getComputedStyle(self).font || getComputedStyle(document.body).font;
const metrics = context.measureText(self.value);
self.style.width = "" + metrics.width + "px";
return metrics.width;
}