Question

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

我写了一个autosizing 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的最大高度时，我无法在离子文本区域中滚动...所以如果我想要纠正文本的隐藏部分，那是不可能的。此外，当我尝试滚动它时，实际上滚动聊天（离子内容）......

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

Answer 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;
        }
      }
    }

使用包含adjust函数的自定义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';
    }

  }

希望这会帮助别人。

当高度超过最大高度时，使离子文本区域可滚动

1 个答案: