HTML Input text标签宽度自适应内容

方法一：CSS + Javascript实现

在HTML中定义element，同时定义并注册oninput事件

        <label class="input-sizer" data-value="default value">
            <input class="number-input1" type="text" oninput="this.parentNode.dataset.value = this.value" size="15" value="default value" placeholder="placeholder" >
        </label>

在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事件

     <input type="text" oninput="setWidthByContent(this);">

在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;
      }