封装一个自动resize的textarea（Angular）

xiaolinbang 发布于2019-08-23 13:10 / 1845人阅读

摘要：将的高度和设置为仅能输入一行，这么做是为了用元素的表示其内容的高度。在模块内新建一个组件。输出属性将会在用户输入的数据变化时发出数据。让的高度始终等于的这里是直接操作，建议最好使用进行的修改。

>> 前往stackblitz编辑代码 核心思路

创建两个textarea，这里暂取名为text和text1。（最后会将text1隐藏，调试时先让text1显示）。

将text1的高度和rows设置为仅能输入一行，这么做是为了用元素的scrollHeight表示其内容的高度。

用户将在text中输入，我们将输入的值同步绑定到text1中，并通过text1的scrollHeight获取输入内容的高度，并同步改变text的height。

实现 准备工作

首先，新建一个模块textarea.module.ts，并引入FormsModule，因为接下来将会用到ngModel进行双向数据绑定。

在模块内新建一个组件textarea。

在模块内exports出该组件。以后只需引入该模块即可使用该组件。

实作

在组件模板内写两个textarea，并标记为模板变量#text和#text1。

在模板中数据绑定，并监听数据变化。

在textarea.component.ts中增加一个输入属性和一个输出属性。输入属性maxHeight表示textarea的heigh的极限。输出属性valChange将会在用户输入的数据变化时发出数据。

 @Input("max-height") maxHeight = 100;
 @Output("valChange") valChange = new EventEmitter();

在textarea.component.ts中写模板中调用的onChange方法。让text的高度始终等于text1的scrollHeight；这里是直接操作Dom，建议最好使用Renderer2进行dom的修改。

 onChange() {
this.reset();
setTimeout(() => {
  this.valChange.emit(this.val);
  this.reset();
}, 0)

}
reset() {
    this.text1.nativeElement.style.width = (this.text.nativeElement.scrollWidth + 2) + "px";
    if (this.text1.nativeElement.scrollHeight < this.maxHeight) {
      this.text.nativeElement.style.height = (this.text1.nativeElement.scrollHeight + 2) + "px"
    }
}

注意1：这里获取scrollwidth的目的是因为不同的浏览器对滚动条的呈现逻辑有差异，我们在css中已经设置了text1的overflow=hidden，始终不会让text1出现滚动条，因此我们需要让他的宽度始终等于text1的宽度，以保证当text出现滚动条是他的的宽度也保持一致，从而让scrollHeight可以完美映射到text，否则会出现text中明明还没有达到边界，高度就自行变化了。
注意2：setTimeout中的逻辑是为了应付事件环，因为我们监听的是text的变化，当text中输入变化时，text1中通过数据绑定得到的值往往还没有改变，需要等一个节拍。

使用

只需要监听输出属性valChange，并传入$event就可以获取用户输入了。

如有需要可以在此基础上继续扩展，使其兼容响应式表单。

修改样式需要注意选择器的权重。

GPU云服务器云服务器一个封装的Ajax类后台封装一个json resizable resize

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

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

编写自适应高度的 textarea

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

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

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

wenzi 2019-08-02 14:19 评论0 收藏0
input与textarea的区别，并用div模拟textarea

摘要：一和的区别元素用于为基于的表单创建交互式控件，以便接受来自用户的数据。一、input 和 textarea 的区别 input： HTML 元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。 textarea： HTML 元素代表一个多行的纯文本编辑控件. Write something here 区别：标签是成对的，有结束标签进行闭合，标...

dance 2019-08-01 17:55 评论0 收藏0
input与textarea的区别，并用div模拟textarea

摘要：一和的区别元素用于为基于的表单创建交互式控件，以便接受来自用户的数据。一、input 和 textarea 的区别 input： HTML 元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。 textarea： HTML 元素代表一个多行的纯文本编辑控件. Write something here 区别：标签是成对的，有结束标签进行闭合，标...

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