Проверить элемент на котором фокус на пустоту

Question

Как узнать, является ли элемент, на котором в данный момент фокус - пустым ? Элемент находится внутри contenteditable блока. Не понимаю как проверить т.к. внутри элемента обычно ставится тег <br>.

Пробовал через activeelement, is(:focus), trim и т.п..не получается. Фокус ставится на contenteditable блок, а не на элементе внутри него, по которому я щелкнул. Подскажите, как поступить

$('#article').on('keydown keyup click',function(e) {

    console.log(e.target);
    // console.log(e.target.textContent == '');

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article id="article" contenteditable="true">
<p class="paragraph" >Параграф 1</p>
<p class="paragraph" >Параграф 2</p>
</article>

Answer 1

Как то так?, если нужно дополнение дай знать. Если элемент пусто то при фокусе всплывает текст и то же самое всплывает тогда когда все удаляешь из элемента

let x = document.querySelector(".input")
document.querySelector(".input").oninput = function(){
  if(x.value == ""){
  x.placeholder = "Тут пусто";
  }

}
document.querySelector(".input").onfocus = function(){
  if(x.value == ""){
  x.placeholder = "Тут пусто";
  }
}
 document.querySelector(".input").onblur = function(){
  if(x.value == ""){
  x.placeholder = "";
  }
}

<input type = "text" class = "input">

Answer 2

Ответ дали на js форуме. Спасибо им за это. Собственно решение. Может кому-то понадобится:

    const sel = window.getSelection();
    let el = sel.focusNode;   // скорее всего получим текстовый узел, а не элемент
    if (el.nodeType != 1) el = el.parentElement; // тогда получаем родительский элемент.
    console.log(el.textContent == '');

БЛОГ НА HUSL

Проверить элемент на котором фокус на пустоту

Ответы (2 шт):