input文本框设置自动宽度，textarea文本域设置自动高度。

大哥_ZH

已于 2023-12-06 17:16:44 修改

阅读量5.2k

点赞数 2

分类专栏： html 文章标签： javascript

于 2021-08-23 15:26:33 首次发布

本文链接：https://blog.csdn.net/weixin_44671994/article/details/119696881

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

input文本框设置自动宽度，textarea文本域设置自动高度。

html代码如下：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <title>文本框自动设置宽度，文本域自动设置高度</title>
    <style type="text/css">
        /*input文本框变下划线*/
        input {
            border: none;
            border-bottom: 1px solid #000;
        }

        textarea {
            width: 80%; /*自动适应父布局宽度*/
            overflow: auto;
            word-break: break-all;
            background-color: #DFE8F6;
            /*在ie中解决断行问题(防止自动变为在一行显示，主要解决ie兼容问题，ie8中当设宽度为100%时，文本域类容超过一行时，
        当我们双击文本内容就会自动变为一行显示，所以只能用ie的专有断行属性“word-break或word-wrap”控制其断行)*/
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //设置文本域自动高度
            $.fn.autoHeight = function () {
                function autoHeight(elem) {
                    elem.style.height = 'auto';
                    elem.scrollTop = 0; //防抖动
                    elem.style.height = elem.scrollHeight + 'px';
                }

                this.each(function () {
                    autoHeight(this);
                    $(this).on('keyup', function () {
                        autoHeight(this);
                    });
                });
            }
            $('textarea[autoHeight]').autoHeight();

            //input框自动宽度
            $("input").unbind('keydown change keyup').bind('keydown change keyup', function () {
                var input = $('<input />').css({display: 'none'});
                $('body').append(input);
                var inputDefaultWidth = input.width();
                input.remove();
                var valueWidth = textWidth($(this).val());
                if (valueWidth > inputDefaultWidth) {
                    $(this).width(valueWidth);
                }else{
                    $(this).width(inputDefaultWidth);
                }
            });
        });

        //获取文本宽度
        function textWidth(text) {
            var sensor = $('<pre>' + text + '</pre>').css({display: 'none'});
            $('body').append(sensor);
            var width = sensor.width();
            sensor.remove();
            return width;
        };

    </script>
</head>
<body>
<div id="content">
    <div>文本框：
        <input class="text" type="text" id="" name="" value=""/>
    </div>
    <div>文本域：</div>
    <div><textarea autoHeight="true" id="" name="" value=""></textarea></div>
</div>
</body>
</html>