Contenteditable DIV не работает должным образом с угловой двусторонней привязкой в ​​Firefox - PullRequest
Новая
       7

Contenteditable DIV не работает должным образом с угловой двусторонней привязкой в ​​Firefox

0 голосов
/ 06 июля 2018

Я сделал свой div contenteditable div, и он также открывает ngx-popover для keyup и заполняет результаты поиска в popover на основе searchText , поэтому мне нужно двухстороннее связывание, а также редактирование контента, далее мне нужно div вместо ввода: 

<span>
   <div id="contenteditablediv" contenteditable="true" (keyup)="triggerUserSearch()" type="text" [popover]="searchTemplate"
        placement="bottom"  triggers="keyup click" [textContent]="searchText" (input)="searchText=$event.target.textContent" [outsideClick]="true"
        containerClass="searchUsersPopup" placeholder="To" class="recipientInput searchTerm">{{searchText}}
   </div>
</span>

Но когда я добавлю ниже строку кода: 

(input)="searchText=$event.target.textContent"

Он не работает правильно в браузере Firefox. Он вводит назад в Firefox, когда вы помещаете курсор в конец.

Я взял ссылку снизу Плункер , который также не работает правильно в Firefox.
Также бывает то же самое для SO Ответ и Plunker

Я не уверен, что именно делает код (input)="searchText=$event.target.textContent". Но это связывает searchText и значение div. Так что это требуется, но это также вызывает проблемы. Пожалуйста, объясните значение кода выше, если это возможно. Спасибо!

1 Ответ

0 голосов
/ 18 июля 2018

(вход)

Событие ввода запускается, когда что-то входит в элемент input или textarea. имеет изменения, и он также запускается, когда что-то изменилось в элементах с contenteditable атрибутом.

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

(input)="searchText=$event.target.textContent"

Если вы удалите эту строку из вашего div, она будет правильно работать в Mozilla!

И вам это не нужно, чтобы получить (input) = "searchText = $ event.target.textContent" значение div, вы можете просто использовать ViewChild decorator, чтобы получить значение div 

@ViewChild('ref') ref:ElementRef; 
 triggerUserSearch(){
       console.log(this.ref.nativeElement.innerHTML);
  }

Проверьте пример здесь: https://stackblitz.com/edit/input-event

...