Vue中如何让输入框宽度适配内容并消除右侧多余空白？

问题根源 #

Input标签的size属性是基于字符数量估算宽度，但不同字符（如中文、全角字符）的实际宽度差异大，再加上浏览器默认的内边距、字体渲染差异，会导致输入框宽度和实际内容不匹配，出现右侧留白。而contenteditable="true"的span是inline元素，宽度完全由内容撑开，不存在这类估算偏差。

具体解决方案 #

1. 用镜像元素计算真实宽度（最精准）

创建一个和输入框样式完全一致的隐藏元素，同步输入内容后获取其实际宽度，再赋值给输入框，彻底避免估算误差：

<template>
  <div class="input-wrapper">
    <input
      type="text"
      v-model="inputValue"
      :placeholder="placeholder"
      :style="{ width: inputWidth + 'px' }"
      @input="updateInputWidth"
      @blur="handleBlur"
      style="max-width: 100%;"
    />
    <!-- 镜像元素：用于计算内容真实宽度 -->
    <span class="input-mirror" aria-hidden="true">{{ inputValue || placeholder }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      inputWidth: 0,
      placeholder: '请输入内容'
    }
  },
  mounted() {
    this.updateInputWidth() // 初始化宽度
  },
  methods: {
    updateInputWidth() {
      const mirror = this.$el.querySelector('.input-mirror')
      if (mirror) {
        // 加8px额外宽度避免光标被截断
        this.inputWidth = mirror.offsetWidth + 8
      }
    },
    handleBlur() {
      // 原有的blur逻辑
    }
  }
}
</script>

<style scoped>
.input-wrapper {
  position: relative;
}
.input-mirror {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  white-space: pre; /* 保留空格，确保宽度计算准确 */
  /* 完全复制输入框的样式 */
  font-family: inherit;
  font-size: inherit;
  padding: inherit;
  border: inherit;
}
</style>

2. 修正size属性的计算逻辑（轻量方案）

针对中英文宽度差异，调整size的计算规则，让估算更贴近实际宽度：

<template>
  <input
    type="text"
    v-model="inputValue"
    :placeholder="placeholder"
    :size="calcInputSize()"
    @input="handleInput"
    @blur="handleBlur"
    style="max-width: 100%"
  />
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      placeholder: '请输入内容'
    }
  },
  methods: {
    calcInputSize() {
      if (!this.inputValue) return this.placeholder.length || 10
      // 中文/全角字符算2个单位，英文/半角算1个
      let size = 0
      for (const char of this.inputValue) {
        size += /[\u4e00-\u9fa5|\uff00-\uffff]/.test(char) ? 2 : 1
      }
      // 最小宽度不小于占位符长度
      return Math.max(size, this.placeholder.length || 10)
    },
    handleInput() {
      // 原有的input逻辑
    }
  }
}
</script>

3. 重置默认样式（辅助优化）

部分浏览器的input默认带有内边距，会放大留白视觉效果，可重置样式：

input {
  padding: 0;
  border: none;
  outline: none;
  font: inherit; /* 继承父元素字体，避免字体差异导致宽度偏差 */
}

内容的提问来源于stack exchange，提问作者Non404