input 标签的宽度根据内容自动调整
通过 JavaScript 监听输入事件,临时将输入框宽度设为 auto
以获取内容真实宽度(scrollWidth
),再将该宽度赋值给输入框,从而实现 “内容增减时宽度实时跟随”。
<template><div class="input-adaptive-container"><input ref="inputRef"v-model="inputValue"class="adaptive-input"placeholder="请输入内容"@input="adjustWidth"></div>
</template><script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';const inputRef = ref<HTMLInputElement | null>(null); // 输入框DOM引用
const inputValue = ref('啊啊啊啊啊事实上事实上事'); // 绑定的输入值// 调整输入框宽度的核心方法
const adjustWidth = () => {const input = inputRef.value;if (!input) return;input.style.width = 'auto'; // 临时设为auto,获取真实内容宽度// scrollWidth 是内容实际宽度(含溢出),+2px 是缓冲避免文字贴边input.style.width = `${input.scrollWidth + 2}px`;
};// 组件挂载后,初始化调整宽度(适配初始值)
onMounted(() => {nextTick(() => {adjustWidth();});
});
</script><style scoped>
.input-adaptive-container {text-align: center;padding: 20px;
}.adaptive-input {padding: 6px 8px;border: 1px solid #000;border-radius: 2px;font-size: 16px;outline: none;box-sizing: border-box; /* 确保padding/border不影响宽度计算 */width: auto; /* 基础样式,实际宽度由JS动态控制 */
}
</style>