当前位置: 首页 > news >正文

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>

http://www.dtcms.com/a/337875.html

相关文章:

  • 电梯的构造|保养|维修视频全集_电梯安全与故障救援(课程下载)
  • JSX本质是什么
  • AI行业应用深度报告:金融、医疗、教育、制造业落地案例
  • Docker之redis安装
  • linux中的hostpath卷、nfs卷以及静态持久卷的区别
  • 使用websockets中的一些问题和解决方法
  • 数据结构04(Java)-- ( 归并排序及其时间复杂度)
  • gflags框架安装与使用
  • 手机视频怎么提取音频?3步转成MP3,超简单!
  • Vue 中 v-for 的使用及 Vue2 与 Vue3 的区别
  • Vue 3中watch的返回值:解锁监听的隐藏技巧
  • Navicat 无法登录时找回 SQL 文件的方法
  • Tidio实时聊工具
  • Linux上安装PostgreSQL-源码编译安装备份恢复(超详细)
  • 视觉语言导航(4)——强化学习的三种方法 与 优化算法 2.43.4
  • IP白名单、网段白名单
  • Docker小游戏 | 使用Docker部署文字风格冒险网页小游戏
  • 如何选择一个好的软件成分分析工具?
  • 【计算机视觉与深度学习实战】05计算机视觉与深度学习在蚊子检测中的应用综述与假设
  • 【java中springboot引入geotool】
  • apisix负载均衡测试
  • 负载均衡终极指南:从流量分发到云原生架构的核心解析
  • Spring学习笔记:@Async Spring异步任务的深入学习与使用
  • 基于CentOS 7.6搭建GitLab服务器【玩转华为云】
  • TVS二极管选型指南
  • 构建高效智能语音代理:技术架构、实现细节与API服务推荐
  • 5G + AI + 云:电信技术重塑游戏生态与未来体验
  • Java基础的128陷阱
  • BAS16XV2T1G ON安森美半导体 高速开关二极管 电子元器件IC
  • 【本地部署问答软件Apache Answer】Answer开源平台搭建:cpolar内网穿透服务助力全球用户社区构建