4 Вопрос: Как убрать всех потомков contenteditable элемента?

вопрос создан в Wed, May 8, 2019 12:00 AM

Мне нужно удалить все дочерние элементы div после нажатия кнопки ввода. Ниже есть слушатель div и событий.

<div id = "area" contenteditable="true"></div>

document.onreadystatechange = function(){
    if(document.readyState == 'complete'){
        document.getElementById("area").addEventListener("keypress" , public_mode);
}

function public_mode(){
    var key = window.event.keyCode;
      if (key == 13) {
         sendMessage();
    }
}

function sendMessage(){
    var area = document.getElementById("area");
    while (area.firstChild) {
        area.removeChild(area.firstChild);
    }
}

Как вы можете видеть, contenteditable элементы добавляются в элемент в соответствии с нажатием Enter - это зависит от браузера, какой элемент будет добавлен. В моем случае я использую Chrome и здесь вставляются div. Таким образом, результат после нажатия кнопки ввода в области, но без удаления

<div id = "area" contenteditable = "true">
     Sckoriy
     <div></div>
</div>

и с удалением

<div id = "area" contenteditable = "true">
     <div></div>
     <div></div>
</div> 

Но необходимый результат -

 <div id = "area" contenteditable = "true">
     //Empty
 </div>
    
1
4 ответа                              4                         

Код в основном работает, однако было две основные проблемы.

  • keyCode устарело. Вы должны использовать key, который превращает синтаксис поиска ключа в поиск строки. Это означает, что вместо 13 вы просто проверяете, является ли key Enter.

  • Во-вторых, вам нужно передать событие в вашу функцию public_mode, чтобы вы могли прочитать key, который был нажат при возникновении события. Вам также нужно использовать preventDefault, чтобы предотвратить добавление новой строки после удаления всего из исходной области contentEditable, когда он обнаруживает обнаружение Enter

р>

document.onreadystatechange = function() {
  if (document.readyState == 'complete') {
    document.getElementById("area").addEventListener("keypress", public_mode);
  }

  function public_mode(event) {
    var key = event.key;
    if (key === "Enter") {
      event.preventDefault();
      sendMessage();
    }
  }

  function sendMessage() {
    var area = document.getElementById("area");
    while (area.firstChild) area.removeChild(area.firstChild);
  }
}
#area {
  min-width: 100vw;
  border: 1px solid black;
}
<div id="area" contenteditable="true"></div>
    
1
2019-05-08 16: 24: 25Z
  1. Я должен выяснить, что делает дополнительная функция protectDefault (). Я знаю, что когда этот метод вызывается из-за отправки формы, страница не перезагружается. В этом случае предотвращение добавляется в новую строку нажатием кнопки ввода.
    2019-05-08 17: 09: 14Z
  2. @ Sckoriy Если вы думаете о каждом элементе, некоторые элементы имеют функциональность по умолчанию при создании. к.э. нажатие клавиши ввода в Textareas создает новую строку, нажатие кнопки «Отправить» в форме выполняет сетевой запрос и т. д.) Тогда возникает вопрос - поскольку эти функции событий встроены при добавлении этих элементов, что делать, если они вам не нужны работать именно так, как описано? Обходной путь заключается в том, что вы можете добавить новый прослушиватель событий к тому же событию, которое отслеживается по умолчанию, и, вызвав event.preventDefault() в новом прослушивателе событий, вы можете остановить запуск поведения по умолчанию.
    2019-05-08 17: 20: 43Z

Вы можете просто установить для свойства innerHTML пустую строку;

area.innerHTML = '';
    
0
2019-05-08 16: 25: 22Z
  1. Нет разницы между моим способом удаления и этим. Кроме того, ваш путь намного медленнее;
    2019-05-08 16: 27: 10Z

нацелен на дом по id

var s = document.getElementById("area");

сохранить количество детей

var num = s.children.length;

и удалите число дочерних элементов элемента

for(var i=0;i<num;i++){
   s.children[0].remove()
 }

и внутренний для некоторого текста

s.innerHTML = "";
    
0
2019-05-08 16: 26: 52Z
  1. Ответ уже был дан. Решение состоит в том, чтобы вызвать метод protectDefault (). Это не зависит от способа, которым элементы будутeleted.
    2019-05-08 16: 34: 12Z
  2. @ Sckoriy, да, я вижу, что нужен warnDefault (), правильный ответ
    2019-05-08 16: 39: 09Z

Передайте событие ключа в качестве аргумента своей функции.

Кроме того, если вы не хотите, чтобы символ новой строки вводился в ваш тег div, вы можете запретить продолжение события с event.preventDefault().

р>

document.onreadystatechange = function() {
  if (document.readyState == 'complete') {
    const area = document.getElementById('area')
    area.addEventListener('keypress', public_mode);
    area.focus();
  }
}

function public_mode(event) {
  if (window.event.keyCode == 13) {
    sendMessage();
    event.preventDefault();
  }
}

function sendMessage() {
  const area = document.getElementById('area');
  while (area.firstChild) {
    area.removeChild(area.firstChild);
  }
}
<div id="area" contenteditable="true">Press Enter to erase me!</div>
    
0
2019-05-08 16: 34: 49Z
  1. @ zfrisch, я просто даю альтернативный способ сделать это
    2019-05-08 16: 30: 47Z
источник размещен Вот