Диапазон текста остается тем же после отмены выбора в contenteditable - PullRequest
Новая
       31

Диапазон текста остается тем же после отмены выбора в contenteditable

0 голосов
/ 01 октября 2018

У меня есть обработчик события mouseup внутри contenteditable, чтобы проверить, выбран ли текст или нет.Если вы выделите текст после ввода, все будет хорошо, но если вы нажмете еще раз (чтобы отменить выделение текста), консоль покажет, что range.toString() одинаково, несмотря на то, что текст не выделен.

http://jsfiddle.net/xpvt214o/857876/

введите что-то в contenteditable, затем выберите это, затем нажмите еще раз (чтобы отменить выбор) и проверьте консоль.Оба console.logs будут одинаковыми.

Мне нужно различать реальный выбор и отмену выбора.Если это нормальное поведение, как я могу различить два события или как я могу сделать это по-разному, чтобы предотвратить это поведение?

Ответы [ 2 ]

0 голосов
/ 01 октября 2018

Пожалуйста, проверьте, помогает ли это. 

$('#container').mouseup(function() {
  console.log(getSelectedText());
});

function getSelectedText() {
  if (window.getSelection) {
    return window.getSelection().toString();
  }
  return '';
}
0 голосов
/ 01 октября 2018

Действительно, Chrome действительно изменяет активный выбор после события mouseup.

Вы можете добавить к этому событию хакерский таймаут, который может иногда прерываться ...

Или вы можете использовать событие Selection API selectionchange .

Это событие будет срабатывать каждый раз, когда выбор изменяется: 

$(document).on('selectionchange', function() {
  console.log(getSelection().toString());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="container">Select this dummy text</div>

Дополнительным преимуществом является то, что он также будет работать для выбора клавиатуры.

И чтобы узнать, было ли это событие выбором или Отмена выбора , вы можете проверить, является ли содержимое выборки пустым, или свернут текущий диапазон: 

$(document).on('selectionchange', function() {
  var isUnselect = getSelection().getRangeAt(0).collapsed;
  viewer.style.backgroundColor = isUnselect ? 'red' : 'green';
})
#viewer{
  width: 20px;
  height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewer"></div>
<div contenteditable="true" id="container">Select this dummy text</div>
...