Способ получить позицию курсора textarea и отправить значение с помощью Angular 6 - PullRequest
Новая
       31

Способ получить позицию курсора textarea и отправить значение с помощью Angular 6

0 голосов
/ 25 января 2019

После некоторого времени попытки, и результат не сработал так, как я ожидал, наконец, я нашел способ получить позицию текстовой области и отправить ему какое-то значение, не потеряв ссылку на позицию. 

<div id="defaultText" [attr.contenteditable]="true" data-text="Digite o texto padrão aqui." tabindex="2" 
#defaultText (click)="getFocus(defaultText)" (keydown)="getFocus(defaultText)" (blur)="addValue($event)"></div>


<div class="tags-container-item">
  <div *ngFor="let tag of tags">
    <a (click)="addTextToElement(tag)" class="avaliable-tags">
      <span>{{tag}}</span>
    </a>
  </div>
</div>

Выше у нас есть контейнер div, ведущий себя как текстовое поле, и * ngFor перечисляет некоторые доступные теги для вставки в поле.

И для восстановления позиции и обновления текстового поля на TS: 

  private _lastCursorReference: any;

  addValue(event: any) {
    this.texto = event.currentTarget.innerHTML;
  }

  getFocus(defaultText: any): void {
    if (defaultText && (window.getSelection && window.getSelection().rangeCount > 0)) {
      this._lastCursorReference = window.getSelection().getRangeAt(0).cloneRange().startOffset;
    }
  }

  addTextToElement(insertText: string): void {
    const focus = this._lastCursorReference;
    const leftSide = this.texto.substring(0, focus);
    const rightSide = this.texto.substring(focus, this.texto.length);
    this.texto = `${leftSide} ${insertText} ${rightSide}`;
    this.texto = String(this.texto).replace('&nbsp;', ' ');
  }
...