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文本框隨其中內容而變化長度的方法