【问题标题】:ResizeTextArea in angular 5以 5 角调整 TextArea 的大小
【发布时间】:2018-11-18 14:53:36
【问题描述】:

我是 Angular 的新手。我想让 textarea 自动调整大小,就像在这种情况下 https://www.primefaces.org/primeng/#/inputtextarea 一样。我尝试了不同的方法,但在 Angular 5 上没有任何效果。

这段代码显示了我最初的 textarea 版本。

<div class="form-group" contenteditable="true">
    <label for="description">Description</label>
    <textarea type="text" class="form-control" id="description" [(ngModel)]="dish.description" #description="ngModel" name="description" required></textarea>
    <div [hidden]="description.valid || description.pristine" class="alert alert-danger">Description can't be empty</div>
</div>

感谢您的帮助,谢谢。

【问题讨论】:

    标签: angular typescript textarea angular5 autoresize


    【解决方案1】:

    终于找到解决办法了

      autogrow() { 
        let textArea = document.getElementById("description") 
        textArea.style.overflow = 'hidden'; 
        textArea.style.height = 'auto'; 
        textArea.style.height = textArea.scrollHeight + 'px'; 
    } 
    

    在 HTML 中:

    <textarea style="resize:vertical" (keyup)="autogrow()" rows="3" (click)="autogrow()" type="text" class="form-control" id="description" [(ngModel)]="myprivateObject.description" #description="ngModel" name="description" required></textarea> 
    

    【讨论】:

      【解决方案2】:

      您可能不需要编写自己的指令或事件处理程序。您可以使用官方 Angular CDK 中的cdkTextareaAutosize

      https://material.angular.io/components/input/overview#auto-resizing-code-lt-textarea-gt-code-elements

      【讨论】:

      • 谢谢。也许你是对的。那是在 2018 年。我没有找到解决方案。也许现在事情发生了变化
      • @Patrick 你不需要材料,只需要 CDK。它们是独立的模块。
      猜你喜欢
      • 2021-12-25
      • 1970-01-01
      • 2021-11-25
      • 2013-06-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多