Как запустить queryCommandState для определенного div (а не для всей страницы)? - PullRequest
Новая
       36

Как запустить queryCommandState для определенного div (а не для всей страницы)?

0 голосов
/ 08 ноября 2019

Как определить, является ли элемент полужирным , ТОЛЬКО в пределах моего contenteditable div, а не когда пользователь щелкает где-либо еще на всей странице?

Вот мой JSFiddle с кодом.

Я пытаюсь запустить document.queryCommandState ("bold") , но только для моего contenteditable = "true" div.

Я некоторое время гуглил и ничего не могу найти. Я попытался заменить / добавить мой селектор div $ (". Text-editor") к слову document несколькими различными способами, что не работает. Я чувствую, что упускаю что-то очевидное. Спасибо!

HTML: 

<div contenteditable="true" class="text-editor">Content <b>editable</b>. Type here...</div>

<div class="normal-div">Content <b>not</b> editable.</div>

Click on the bold (and not bold) text in the two boxes. Result:
<div class="is-bold">The text your cursor's on is BOLD.</div>

<div class="is-not-bold">The text your cursor's on is NOT BOLD.</div>

<br>^^ I want this green result to only change when you're clicking inside the editable box.

CSS: 

.text-editor {
  border: 2px solid red;
  margin-bottom: 10px;
}

.normal-div {
  border: 2px solid blue;
  margin-bottom: 10px;
}

.is-bold {
  display: none;
  color: green;
}

.is-not-bold {
  display: none;
  color: green;
}

.active {
  display: block;
}

jQuery: 

setInterval(function () {
    var isItBold = document.queryCommandState("bold");
    if (isItBold == true) { 
    $(".is-bold").addClass("active");
    $(".is-not-bold").removeClass("active"); 
  }
  else { 
    $(".is-bold").removeClass("active");
    $(".is-not-bold").addClass("active"); 
  }
}, 100)

1 Ответ

1 голос
/ 08 ноября 2019

Вы можете проверить, фокусируется ли contenteditable, прежде чем делать что-либо из этого. 

var editable = $("[contenteditable]")

setInterval(function () {
    if (!editable.is(":focus")) return

    var isItBold = document.queryCommandState("bold");
    if (isItBold == true) { 
    $(".is-bold").addClass("active");
    $(".is-not-bold").removeClass("active"); 
  }
  else { 
    $(".is-bold").removeClass("active");
    $(".is-not-bold").addClass("active"); 
  }
}, 100)

Также setInterval здесь не требуется. Например, вы можете связать событие click.

...