Javascript Focus () не работает с пустой текстовой областью

Question

Я пытаюсь сосредоточиться на текстовой области, когда вызывается функция ниже.Он работает, как и ожидалось, когда текстовая область заполнена, но ничего не происходит, когда текстовая область пуста.Я также пытался удалить заполнитель, но это не имело значения.

У кого-нибудь есть идеи, как это исправить?

Код Javascript:

focusOnText(sampleId: string){
    var textarea = document.getElementById(sampleId);
    textarea.focus();

HTMLкод:

<textarea class="x" id="sampleId"
          [disabled]="!this.data && !this.editable"
          [readOnly]="!this.editable"
          [(ngModel)]="data"
          placeholder="sample input">{{data}}</textarea>

РЕДАКТИРОВАТЬ:

Я пропустил кнопку редактирования, которая устанавливает редактируемое значение true и вызывает функцию focusOnText.Таким образом, при нажатии кнопки редактирования значение [отключено] равно false (поскольку не выполняются оба условия для того, чтобы значение [отключено] было истинным).Следовательно, я могу сосредоточиться, фактически щелкая в текстовой области, она просто не фокусируется автоматически, когда данные равны нулю.

Я использую оба [readOnly] и [отключено], чтобы я мог применять определенные стили в различных сценариях(текстовое поле пустое и нередактируемое VS. пустое и редактируемое).

Answer 1

Должно работать, если вы немного задержите звонок на focus().Вы можете избежать использования getElementById(id) с помощью ссылочной переменной шаблона txt, связанной с элементом textarea и переданной в качестве параметра обработчику события нажатия:

<textarea #txt class="x"
          [disabled]="!data && !editable"
          [readOnly]="!editable"
          [(ngModel)]="data"
          placeholder="sample input"></textarea>

<button (click)="editable = true; focusOnText(txt)">Edit text</button>

В коде используйтеsetTimeout() для задержки вызова на focus().

focusOnText(txt: HTMLTextAreaElement) {
  setTimeout(() => {
    txt.focus();
  });
}

При необходимости вы можете установить задержку.В приведенном выше примере не указывается какая-либо задержка, но, тем не менее, вызов является асинхронным.

См. этот стек для демонстрации.