当高度超过最大高度时使 ion-textarea 可滚动答案

【问题标题】：Make an ion-textarea scrollable when height is exceeding max-height当高度超过最大高度时使 ion-textarea 可滚动
【发布时间】：2018-04-07 19:27:42
【问题描述】：

我正在尝试在我的应用中实现聊天。

我写了一个自动调整 ion-textarea 如下：查看

<ion-footer [keyboardAttach]="content">
  <ion-toolbar class="text-input">
    <ion-item no-lines>
      <ion-textarea autosize
        rows="1"
        placeholder="Votre message..."
        autocomplete="on"
        autocorrect="on"
        [(ngModel)]="message"
        >
      </ion-textarea>
      <button ion-button small icon-only round item-end color="secondary" (tap)="onSend()">
        <ion-icon name="send"></ion-icon>
      </button>
    </ion-item>
  </ion-toolbar>
</ion-footer>

CSS

ion-footer {
    ion-toolbar.toolbar.toolbar-ios {
      &.toolbar:last-child {
        padding-bottom: 0px;
        height: auto;
      }
    }
    ion-item.item-textarea {
      background-color: transparent;
    }
    .text-input {
      height: auto;
      div.input-wrapper {
        background-color: #fff;
        border-radius: 20px;
        textarea.text-input {
          margin-left: 8px;
          max-height: 100px;
        }
      }
    }
  }

指令

import {ElementRef, HostListener, Directive, OnInit, ViewChild} from '@angular/core';
import {Content} from 'ionic-angular';

@Directive({
  selector: 'ion-textarea[autosize]'
})

export class AutosizeDirective implements OnInit {
  @HostListener('input', ['$event.target'])
  onInput(textArea:HTMLTextAreaElement):void {
    this.adjust();
  }

  constructor(public element:ElementRef) {
  }

  ngOnInit():void {
    setTimeout(() => this.adjust(), 0);
  }

  adjust():void {
    let textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    textArea.style.height = textArea.scrollHeight + "px";
  }
}

一切正常，但滚动。

当我超过 100px 最大高度时，我无法在 ion-textarea 中滚动...所以如果我想更正文本的隐藏部分，这是不可能的。此外，当我尝试滚动时，它实际上会滚动聊天（离子内容）......

知道如何解决这个问题吗？

【问题讨论】：

为什么要设置 textArea.style.overflow = 'hidden' ？
因为我不希望文本一旦超过最大高度就可见

标签： css ionic-framework ionic2 textarea ionic3

【解决方案1】：

我是这样解决的： .SCSS

.text-input {
      height: auto;
      div.input-wrapper {
        background-color: #fff;
        border-radius: 20px;
        textarea.text-input {
          margin-left: 8px;
          //overflow-y: auto;
          //max-height: 100px;
        }
      }
    }

并使用包含调整功能的自定义 Autosize 指令：

adjust():void {
    let textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
    textArea.style.height = 'auto';
    if (textArea.scrollHeight < 100) {
      textArea.style.height = textArea.scrollHeight + "px";
      textArea.style.overflowY = 'hidden';
    } else {
      textArea.style.height = "100px";
      textArea.style.overflowY = 'auto';
    }

  }

希望这对其他人有帮助。

【讨论】：