textarea高度自适应

超、凢脫俗 2022-04-05 15:40 351阅读 0赞

方法一、直接在textarea中添加oninput方法：

<textarea οninput="this.style.height = this.scrollHeight + 'px';"></textarea>

说明：

在IE下可以根据输入的内容自适应高度，但是在谷歌浏览器下随着输入的字数越多，高度越高， 比实际的高度要高出很多；

方法二、自定义高度设置方法：

<script>  
    /\*\*  
     \* 文本框根据输入内容自适应高度  
     \* param  \{HTMLElement\} 输入框元素  
     \* param \{Number\}  设置光标与输入框保持的距离(默认0)  
     \* param \{Number\} 设置最大高度(可选)  
     \*/  
    var autoTextarea = function (elem, extra, maxHeight) \{  
        extra = extra || 0;  
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,  
                isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),  
                addEvent = function(type, callback) \{  
                    elem.addEventListener ?  
                            elem.addEventListener(type, callback, false) :  
                            elem.attachEvent('on' + type, callback);  
                \},  
                getStyle = elem.currentStyle ? function(name) \{  
                    var val = elem.currentStyle\[name\];  
                    if (name === 'height' && val.search(/px/i) !== 1) \{  
                        var rect = elem.getBoundingClientRect();  
                        return rect.bottom - rect.top -  
                                parseFloat(getStyle('paddingTop')) -  
                                parseFloat(getStyle('paddingBottom')) + 'px';  
                    \};  
                    return val;  
                \} : function(name) \{  
                    return getComputedStyle(elem, null)\[name\];  
                \},  
                minHeight = parseFloat(getStyle('height'));  
        elem.style.resize = 'none';  
        var change = function() \{  
            var scrollTop, height,  
                    padding = 0,  
                    style = elem.style;  
            if (elem.\_length === elem.value.length) return;  
            elem.\_length = elem.value.length;  
            if (!isFirefox && !isOpera) \{  
                padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));  
            \};  
            scrollTop = document.body.scrollTop || document.documentElement.scrollTop;  
            elem.style.height = minHeight + 'px';  
            if (elem.scrollHeight > minHeight) \{  
                if (maxHeight && elem.scrollHeight > maxHeight) \{  
                    height = maxHeight - padding;  
                    style.overflowY = 'auto';  
                \} else \{  
                    height = elem.scrollHeight - padding;  
                    style.overflowY = 'hidden';  
                \};  
                style.height = height + extra + 'px';  
                scrollTop += parseInt(style.height) - elem.currHeight;  
                document.body.scrollTop = scrollTop;  
                document.documentElement.scrollTop = scrollTop;  
                elem.currHeight = parseInt(style.height);  
            \};  
        \};  
        addEvent('propertychange', change);  
        addEvent('input', change);  
        addEvent('focus', change);  
        change();  
    \};  
</script>

说明：

在IE和谷歌下均能自适应高度；但是动态给文本框赋值的时候，高度不能自适应，需要鼠标点击到文本框才能实现高度自适应的效果；

方法三：为了达到完美效果，要综合使用方法一和方法二；

使用实例：

1、样式：

.areaKFYYSM \{  
        margin-top: 5px;  
        min-height: 35px !important;  
        height: auto;  
        width: 96% !important;  
    \}

2、文本框：

<textarea class="areaKFYYSM" id="areaKFYYSM" οninput="this.style.height = this.scrollHeight + 'px';" ></textarea>

<input id="btn\_Ok" type=button value='初始化值' class="img-smallbtn btn-ok" οnclick="kfyysmChangeBFZ()" />

3、初始化方法设置文本框高度方法：

$(function () \{

// 为每一个textarea绑定事件使其高度自适应  
        $.each($("textarea"), function (i, n) \{  
            autoTextarea($(n)\[0\]);  
        \});

\});

4、文本框动态赋值后，调用input事件：

function kfyysmChangeBFZ() \{

// 给文本框初始值

$("\#areaKFYYSM").val("文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值");

//文本框高度自适应  
        $("\#areaKFYYSM").trigger("input");

\}

参照网址：

[https://blog.csdn.net/fxss5201/article/details/63267432][https_blog.csdn.net_fxss5201_article_details_63267432]

[https_blog.csdn.net_fxss5201_article_details_63267432]: https://blog.csdn.net/fxss5201/article/details/63267432

发表评论取消回复

表情：

评论列表（有 0 条评论，351人围观）

还没有评论，来说两句吧...

相关阅读

相关 textarea的高度自适应

textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。例

柔情只为你懂/ 2022年09月29日 15:55/ 0 赞/ 298 阅读

相关 div模拟实现textarea（高度自适应）

div模拟实现textarea（高度自适应）简单贴出实现 CSS代码： .text_box { width: 400px;

- 日理万妓/ 2022年06月13日 13:57/ 0 赞/ 288 阅读

相关 textarea 自适应内容高度

$('textarea').each(function(){ this.setAttribute('style', 'height:' + (this.s

约定不等于承诺〃/ 2022年06月09日 08:48/ 0 赞/ 277 阅读

相关关于Element的textarea自适应高度

今天观看学习Element的源码，看到textarea有一个自适应高度的属性，毕竟以前也接触过这方面的问题，你可以查看此处：[更强大的textarea高度自适应][textar

素颜马尾好姑娘i/ 2022年06月05日 03:08/ 0 赞/ 455 阅读

相关 textarea高度自适应

之前虽然写了几篇关于textarea的高度自适应的解决方案，但都不甚满意，最近从Element的源码中得到启示，就自己写了一个textarea高度自适应的jquery插件。

ゞ浴缸里的玫瑰/ 2022年06月02日 07:09/ 0 赞/ 376 阅读

相关 textarea 自适应宽度和高度

场景分析解决场景经常与遇到处理文字域的问题, 需要继承父级的宽度分析 `te

「爱情、让人受尽委屈。」/ 2022年05月18日 08:20/ 0 赞/ 439 阅读

相关 textarea高度自适应

方法一、直接在textarea中添加oninput方法： <textarea οninput="this.style.height = this.scrollHeight +

超、凢脫俗/ 2022年04月05日 15:40/ 0 赞/ 352 阅读

相关 textarea高度自适应

textarea的高度根据键入的长度自适应高度，利用input事件，获取长度和设置高度； document.getElementById("text-adaption

谁践踏了优雅/ 2022年04月04日 06:22/ 0 赞/ 384 阅读

相关编写自适应高度的 textarea

文本框是很常见的输入控件，我相信只要写过表单的肯定接触过 [textarea][] 这个元素。 OK。但是现在产品经理说了：需要这个文本框可以根据用户输入内容自适应其高度。

﹏ヽ暗。殇╰゛Y/ 2022年03月07日 13:48/ 0 赞/ 526 阅读

相关 textarea 自适应宽度和高度

css样式： .textarea-inherit { width: 100%; overflow: auto; wor

悠悠/ 2021年11月22日 13:08/ 2 赞/ 505 阅读