JS Contenteditable Подчеркивание не работает

Question

Я только что столкнулся с ошибкой в ​​document.execCommand Я думаю.Здесь проблема.

$("#underline-btn").click(function() {
  document.execCommand("underline");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div contenteditable="true">This is a contenteditable div. To recreate the bug, click inside this div and press the underline button. Now type a word or a letter. Then press backspace and delete whatever you typed. Now press the underline button again. Start typing something. The word you type will still be underlined.</div>
<button id="underline-btn">Underline</button>

Чтобы воссоздать ошибку:

1. Щелкните внутри contenteditable div и нажмите underline button
2. Теперь введите слово или букву
3. Затем нажмите backspace и удалите все, что вы ввели.
4. Теперь снова нажмите underline button
5. Начните набирать что-нибудь
6. Вводимое слово по-прежнему подчеркнуто

В идеале, нажмите underline button снова следует удалить форматирование подчеркивания для слов, которые вы ввели после, но по какой-то причине это не так.

Я не понимаю, почему это так.Он отлично работает с bold и italics, но с underline портит и сохраняет форматирование.

Буду признателен, если кто-нибудь сможет предложить обходной путь или что-то, что решит эту проблему.Спасибо.

Answer 1

Когда вы нажимаете кнопку underline, подчеркивание «включается / выключается для выбора или в точке вставки.»

документация

Теперь, когда вы возвращаете Unile, больше нет символов и blur редактируемый div, вставленный тег <u> удаляется.Повторное нажатие на кнопку включит ее снова.

Попробуйте это в своем собственном фрагменте:

1. Нажмите внутри contenteditable div и нажмите underline button
2. Теперь введите слово или букву
3. Затем нажмите backspace и удалите все, что вы ввели.
4. Теперь просто размыть редактируемое поле и снова сфокусироваться.
5. Начните набирать что-то
6. Вводимое вами слово не подчеркнуто

Итак, я предлагаю вам убедиться, что сделан выбор для включения кнопки подчеркивания ... Таким образом, подчеркивание будет применяться только к выполненному выделению ... Предотвращение возможности применения подчеркивания «в точке вставки» , что не очевидно для пользователя ...

$("[contenteditable]").on("mouseup",function(){
  selectionMade = (window.getSelection().type == "Range");  // True is there actually is a selection made.
  $("#underline-btn").prop("disabled",!selectionMade);
});


$("#underline-btn").click(function() {
  document.execCommand("underline");
  console.log("Toggled underline on a selection.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div contenteditable="true">This is a contenteditable div. To recreate the bug, click inside this div and press the underline button. Now type a word or a letter. Then press backspace and delete whatever you typed. Now press the underline button again. Start typing something. The word you type will still be underlined.</div>
<button id="underline-btn" disabled>Underline</button>

Теперь у пользователя есть визуальная индикация того, может ли он использовать кнопку подчеркивания или нет.