input文本框自适应文本内容宽度 

input文本框自适应文本内容宽度
复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>input文本框自适应文本内容宽度</title>
</head>
<body>

    <input type="text" id="t1" value="哈哈哈哈哈哈哈哈哈哈哈哈哈或或" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        $(function () {
            var text = $("#t1");
            textWidth(text);
        });
        function textWidth($this) {
            var inputVal = $this.val();
            var fontSize = $this.css('font-size');
            var span = document.createElement("span");
            document.body.appendChild(span);
            var $span = $(span);
            $span.text(inputVal).css('font-size', fontSize).hide();
            var width = $span.width();
            $this.css('width', width);
        };
    </script>
</body>
</html>
复制代码

参考： https://blog.csdn.net/weixin_43804382/article/details/84542732

 

posted @   一只桔子2233  阅读(2835)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae