创建一个高度自适应的textarea

BLUE 发布于2019-08-21 11:37 / 1494人阅读

摘要：今天的任务是生成一个高度自适应的而且也可以设置最小高度和最大高度。但是有一个问题当想从大变到小的时候，这个不能反映文字的实际高度，所以这个方法不是很适合。高度跟着文字的多少走的，而且不需要动画。用的方式生成一个无用的用来计算的高度。

今天的任务是生成一个高度自适应的textarea,而且也可以设置最小高度和最大高度。
最简单的方法
textarea的属性是overflow:auto;那么如果内容的高度大于textarea本身的高度时，可以把textarea的高度设置成scrollHeight

let textarea = document.getElementById("textarea");
textarea.style.height = textarea.scrollHeight + "px";

这种方法能解决textarea从小变到大的过程。但是有一个问题,当想从大变到小的时候，这个scrollHeight不能反映文字的实际高度，所以这个方法不是很适合。

高度跟着文字的多少走的，而且不需要动画。
如果不需要设置最小高度，一直是跟着文本的高度走的，可以采用这种方式：
auto-textarea: stackoverflow
这种方式的主要是先把textarea的height设置成auto,然后再设置：

textarea.style.height = "auto";
textarea.style.height = textarea.scrollHeight + "px";

但是这个设置还有一个问题,如果变化高度时，想要有一个动画过程，这样设置就不行。

ant.design用的方式
生成一个无用的textarea,用来计算textarea的高度。

let hiddenTextarea;

const factors = [
    "letter-spacing",
    "line-height",
    "padding-top",
    "padding-bottom",
    "font-family",
    "font-weight",
    "font-size",
    "text-rendering",
    "text-transform",
    "width",
    "text-indent",
    "padding-left",
    "padding-right",
    "border-width",
    "box-sizing"
];

export default function calculateNodeHeight(utext){
    // debugger;
    if (!hiddenTextarea) {
        hiddenTextarea = document.createElement("textarea");
        document.body.appendChild(hiddenTextarea);
    }


    let cssStyle = window.getComputedStyle(utext);
    let styleSize = factors.map(n=>{
        return  n + ":" + cssStyle.getPropertyValue(n)
    }).join(";")

    hiddenTextarea.setAttribute("style", styleSize);
    hiddenTextarea.value = utext.value || utext.placeholder || "";

    let height = hiddenTextarea.scrollHeight;
    hiddenTextarea.value = "";
    return {
        scrollHeight: height
    }

}

GPU云服务器云服务器 textarea自适应高度高度自适应 iframe高度自适应 iframe自适应高度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86939.html

编写自适应高度的 textarea

摘要：但是现在产品经理说了需要这个文本框可以根据用户输入内容自适应其高度。想法很简单，当用户输入的文本超过了文本框自身高度时不是会出现滚动条嘛，那么自然而然就能想到这个属性。就应该是用户输入文本的真实高度，至少超过文本框既定高度时是这样。文本框是很常见的输入控件，我相信只要写过表单的肯定接触过 textarea 这个元素。 OK。但是现在产品经理说了：需要这个文本框可以根据用户输入内容自适...

only_do 2019-08-23 15:27 评论0 收藏0
编写自适应高度的 textarea

摘要：但是现在产品经理说了需要这个文本框可以根据用户输入内容自适应其高度。想法很简单，当用户输入的文本超过了文本框自身高度时不是会出现滚动条嘛，那么自然而然就能想到这个属性。就应该是用户输入文本的真实高度，至少超过文本框既定高度时是这样。文本框是很常见的输入控件，我相信只要写过表单的肯定接触过 textarea 这个元素。 OK。但是现在产品经理说了：需要这个文本框可以根据用户输入内容自适...

wenzi 2019-08-02 14:19 评论0 收藏0
使用contenteditable+div模拟textarea文本域实现高度自适应

摘要：使用该组件注意一个问题就是不要在可视化区域的节点上使用样式，否则会出现当鼠标焦点小时光标和小水滴无法消失的情况地址项目地址参考链接模拟文本域轻松实现高度自适应如何让元素只能输入纯文本使用contenteditable+div模拟textarea文本域实现高度自适应开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域，一开始是使用textarea并搭配auto-size...

seasonley 2019-08-01 17:53 评论0 收藏0
使用contenteditable+div模拟textarea文本域实现高度自适应

摘要：使用该组件注意一个问题就是不要在可视化区域的节点上使用样式，否则会出现当鼠标焦点小时光标和小水滴无法消失的情况地址项目地址参考链接模拟文本域轻松实现高度自适应如何让元素只能输入纯文本使用contenteditable+div模拟textarea文本域实现高度自适应开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域，一开始是使用textarea并搭配auto-size...

Olivia 2019-08-29 13:42 评论0 收藏0