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

本文转载自查看原文 2019-08-23 10:29 387 JavaScript

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 我的插件のinput文本框实现宽度自适应 textarea 文本框根据输入内容自适应高度设置ckeditor文本框的宽度为百分比自适应 Vue中可根据内容自适应改变高度的textarea文本框 Vue中可根据内容自适应改变高度的textarea文本框 textarea多行文本框自适应高度关于input type=“text”文本框的默认宽度 QLabel自适应文本宽度遍历input文本框使input文本框随其中内容而变化长度的方法