在angular2中自动调整textarea

Posted 2023-05-07

【中文标题】在angular2中自动调整textarea

【英文标题】：autosize textarea in angular2

【发布时间】：2017-08-07 06:05:12

【问题描述】：

我正在研究 angular2 应用程序。我需要自动调整 textarea 的大小。 我正在尝试重用 https://github.com/stevepapa/angular2-autosize 的 angular2-autosize

按照自述文件进行操作，但出现以下错误

未捕获的错误：模块构建失败：错误：ENOENT：没有这样的文件或目录，打开 'C:\Users\Vipin\SampleApp\node_modules\angular2-autosize\angular2-autosize.js'。

请建议如何解决这个问题。

【问题讨论】：

如果你碰巧使用了 Angular Material，这里有一个很好的解决方案：***.com/a/50459162/3310669

【参考方案1】：

请求的行为已在angular material 中实现，如下所述：Angular Material Input Autosize。如果您仍然使用angular material，这将特别有用。

只需使用cdkTextareaAutosize，如示例所示：

<textarea cdkTextareaAutosize></textarea>

【讨论】：

这应该被标记为更简单的解决方案！谢谢

@SnowBases，不是真的。不是每个人都希望材料输入引入的所有输入滞后。

@Patrick 我对角度材料没有那么丰富的经验。您能否提供一些支持该声明的来源。这可能是答案的一个很好的扩展。

角材料指令github.com/angular/components/blob/master/src/cdk/text-field/…

我认为这应该是公认的解决方案。

【参考方案2】：

更新 (15.04.2018) 设法打包它，现在它可以作为

npm install ngx-autosize

https://github.com/chrum/ngx-autosize

旧答案：

我今天遇到了同样的问题，已经解决了！ 请检查我的叉子： https://github.com/chrum/angular2-autosize

直到 PR 被合并尝试：

npm install https://github.com/chrum/angular2-autosize.git --save

然后在你的代码中，因为它略有不同，你只是导入模块而不是指令......

所以 而不是：

import Autosize from 'angular2-autosize';

@NgModule(
  ...
  declarations: [
    Autosize
  ]
  ...
)

你应该有：

import AutosizeModule from 'angular2-autosize';

@NgModule(
  ...
  imports: [
    AutosizeModule
  ]
  ...
)

【讨论】：

你好，你也支持angular5吗？

将尽快检查其支持

好的，我很快检查了它，在我的所有项目中，我不得不将 typescript 锁定在 2.4.2 以使其工作......我想是时候正确打包它并在 npm 上发布了没有这样的问题

【参考方案3】：

你可以在不使用包的情况下这样做。 很简单

在如下控制器中

autogrow()
  let  textArea = document.getElementById("textarea")       
  textArea.style.overflow = 'hidden';
  textArea.style.height = '0px';
  textArea.style.height = textArea.scrollHeight + 'px';

在 html 中如下所示

<textarea id="textarea" (keyup)="autogrow()" ></textarea>

【讨论】：

虽然这可行，但它打破了 Angular 的理念（即不要直接操作 DOM）。而不是使用 document.getElementById，而是使用 @ViewChild 来获取 textarea 的引用（因为它毕竟是组件的子组件）

好主意，但是当高度 = 0px 然后增加很多时，视图会变得很难看，特别是在行数超过整个视口的文本区域中。

将高度重置为0px不是必须的，可以通过更智能的方式完成

那些聪明的方法是什么？

是的，我们仍然不知道更聪明的方法是什么^^

【参考方案4】：

为什么你需要插件，很简单：

<textarea (keyup)="autoGrowTextZone($event)"></textarea>

和

autoGrowTextZone(e) 
  e.target.style.height = "0px";
  e.target.style.height = (e.target.scrollHeight + 25)+"px";

【讨论】：

详情页怎么办？

【参考方案5】：

对 tanveer 的回答略有修改的答案是使用 @ViewChild

@ViewChild('textArea',  read: ElementRef ) textArea: ElementRef;

public autoGrow() 
 const textArea = this.textArea.nativeElement;
 textArea.style.overflow = 'hidden';
 textArea.style.height = '0px';
 textArea.style.height = textArea.scrollHeight + 'px';

在 HTML 中是

<textarea (keyup)="autoGrow()" #textArea></textare>

【讨论】：

正如 MohammadKermani 对 Tanveer 的回答所评论的那样，“将高度重置为 0px 不是必需的，可以通过更智能的方式完成”

如果你有多个 textarea 元素：@ViewChild('textArea1', read: ElementRef ) textArea1: ElementRef; @ViewChild('textArea2', read: ElementRef ) textArea2: ElementRef; public autoGrow(name) const textArea = this[name].nativeElement; textArea.style.overflow = '隐藏'; textArea.style.height = '0px'; textArea.style.height = textArea.scrollHeight - 20 + 'px';

【参考方案6】：

在 IE 和其他浏览器中对我有用的解决方案

// Usage example: <textarea autoresize></textarea>

import  ElementRef, HostListener, Directive from '@angular/core';

@Directive(
    selector: 'textarea[autosize]'
)

export class Autosize 
 @HostListener('input',['$event.target'])
  onInput(textArea: HTMLTextAreaElement): void 
    this.adjust();
  
  constructor(public element: ElementRef)
  
  ngAfterContentChecked(): void
    this.adjust();
  
  adjust(): void
    this.element.nativeElement.style.overflow = 'hidden';
    this.element.nativeElement.style.height = 'auto';
    this.element.nativeElement.style.height = this.element.nativeElement.scrollHeight + "px";
  

将以下代码添加到 APp.Module.ts

@NgModule(
  declarations: [
    Autosize
  ]
)

在 HTML 上使用标签

 <textarea autosize></textarea>

【参考方案7】：

简单

你可以如下使用：

<textarea [rows]="text.split('\n').length || 2">text</textarea>

或

在 ts 中创建一个函数：

  getHeight(content) 
    const v1 = Math.floor(content.length / 50);
    const v2 = content.split('\n').length;
    return Math.max(v1,v2)
  

HTML：

<textarea [rows]="getHeight(text) || 2">text</textarea>

【讨论】：

简直太棒了！

【参考方案8】：

从 angular-cli 创建指令并添加以下代码

import  Directive, ElementRef, HostListener, Input  from '@angular/core';

@Directive(
selector: '[appAutoGrow]'
)
export class AutoGrowDirective 

constructor(public element: ElementRef) 

@Input() maximumHeight: number; // based on pixel
@Input() minHeight: number; // based on pixel
@HostListener('input', ['$event.target'])
@HostListener('cut', ['$event.target'])
@HostListener('paste', ['$event.target'])
@HostListener('change', ['$event.target'])

ngOnInit(): void 
    this.adjustCustom();


adjustCustom(): void 
    const element = this.element.nativeElement;
    element.style.height = this.minHeight + 'px';
    element.style.height = (element.scrollHeight) + 'px';
    if (element.scrollHeight <= this.maximumHeight) 

        element.style.overflowY = 'hidden'
        delete element.style.maxHeight
     else 

        element.style.overflowY = 'scroll'
        element.style.maxHeight = this.maximumHeight + 'px';
    

并使用如下指令

<textarea autofocus [maximumHeight]="200" [minHeight]="43" appAutoGrow></textarea>

【参考方案9】：

我知道这个话题已经很老了，但我只是更改了 tanveer 的答案以输入最大高度。

    import  Directive, ElementRef, OnInit, HostListener, Input  from '@angular/core';

@Directive(
  selector: '[appAutoResize]',

)
export class AutoResizeDirective implements OnInit 
  constructor(public element: ElementRef) 
  
  @Input() maximumHeight: number; // based on pixel
  @HostListener('input', ['$event.target'])
  ngOnInit(): void 
    this.adjust();
  

  adjust(): void 
    const ta = this.element.nativeElement;
    const maxHeghit = this.maximumHeight;
    ta.style.overflow = 'hidden';
    ta.style.height = 'auto';
    if (ta.scrollHeight <= maxHeghit)  // while current height is less than maximumHeight
      ta.style.height = ta.scrollHeight + 'px';
     else  // greater than maximumHeight
      ta.style.height = maxHeghit + 'px';
      ta.style.overflow = 'auto';
    
  

因此，您可以控制样式行为。 希望能帮到你。