Contenteditable div теряет фокус при обновлении функции html дочернего div - PullRequest
Новая
       9

Contenteditable div теряет фокус при обновлении функции html дочернего div

0 голосов
/ 02 марта 2020

У меня есть массив строк, т. Е. {Текст: [Китай идет на Тайвань. Pandas ясно, что он назвал своих родителей двадцать один в январе,]}.

Я должен отобразить каждый элемент текстового массива в отдельном div. Я сделал эту часть. Правило отображения текста в редактируемом div содержимого:

  1. если число строк внутри редактируемого div содержимого превышает лимит (более 2), тогда цвет отображения этой строки div должен быть красным.

  2. , если количество символов в строке превышает ограничение, тогда 20 символов внутри редактируемого содержимого div, тогда цвет отображения этого строки должен быть красным.

Я сделал с обеими частями. Предположим, что пользователь вводит символ, который находится в позиции 22, тогда я должен обновить HTML для отображения, что 21 номер и 22 цифры символа в красном цвете. Когда я обновляю HTML, тогда определенная строка внутри контент редактируемый div теряет фокус. Как я могу восстановить этот фокус в той же точке? Этот код работает некорректно, когда пользовательский тип середины любой строки и div превышает ограничение символов.

функция, которая обновляет html: 

updateCaption(event,caption,nol,noc){
  debugger;
  var current= document.getSelection();
  var focusOffset=current.focusOffset;
  var ele=event.target;
  let curser;
  var target=event.target.children;
  for(let i=0;i<target.length;i++){
      var text=target[i].innerText;
      caption[i]=text;
      if(i+1>nol){
        target[i].style.color='red'
      }
      if(text.length>noc){
        let char=text.substring(0,20);
        let char1=text.substring(20).fontcolor('Red');
      event.preventDefault();
      target[i].innerHTML=char+char1;
      event.preventDefault();
      curser=true;


      }else if(text.length<noc &&target[i].getElementsByTagName('FONT').length > 0){
        target[i].getElementsByTagName('FONT')[0].color="";
      }
  }
  if(curser){
    this.placeCaretAtEnd(document.getSelection(),focusOffset,event.currentTarget)

  }
}

 placeCaretAtEnd(el,offset,tar) {
   el=el.extentNode
  if (typeof window.getSelection != "undefined"
          && typeof document.createRange != "undefined") {
      var range = document.createRange();
      range.selectNodeContents(el);
      range.collapse(false);
      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);


   } 

}

Я работаю над angular 8. введите описание изображения здесь

...