Блог

Главная - Вопросы по программированию - Поведение API getSelection() при событии ЩЕЛЧКА

Поведение API getSelection() при событии ЩЕЛЧКА

#javascript #html #css #selection

Вопрос:

Если я выберу весь текст из этого div, то вывод будет «abc1234″. когда я нажимаю между » c » и «1», вывод должен быть «abc». но он возвращает предыдущий выделенный текст (в данном случае «abc1234»). если я снова нажму на ту же позицию, он вернет ожидаемый результат (в данном случае «abc»). Есть ли какой-нибудь способ получить ожидаемый результат при первом щелчке мыши?

 $('.test-subject').on('click', function(){
 var sel = window.getSelection();
 console.log(sel.toString());
});

// start selecting the whole text
const range = new Range();
range.selectNode( $('.test-subject')[0] );
window.getSelection().addRange( range ); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test-subject">abc1234</div>

Комментарии:

1. каков ваш ожидаемый результат??

2. предположим, что теперь выделено «abc1234». теперь я нажимаю между c и 1, я должен получить «abc». Но я получаю «abc1234», который является предыдущим выделенным текстом. Если я снова нажму между c и 1, я получу «abc». Мой вопрос в том, есть ли способ, которым я могу получить » abc » при первом щелчке (между c и 1)?

3. Я не могу воспроизвести на macOS (FF и Chrome), поведение здесь ожидаемое.

Ответ №1:

Можете ли вы попробовать этот пример:

 import $ from "jQuery";
$(document).on('selectionchange', function(){
  var sel = window.getSelection();
  console.log(sel.toString(),sel.type);
});

или

 import $ from "jQuery";
$(document).on("selectionchange", function () {
  var sel = window.getSelection();
  if ($(sel.anchorNode).closest(".test-subject").length > 0) {
    console.log(sel.toString(), sel.type);
  }
});

если вам нужно отслеживать только выделение в .test-subject элементе

Комментарии:

1. IMO вы никогда не получите » abc «в качестве выбора, если вы нажмете между» c » и » 1 » (даже если вы используете клавишу shift). Поскольку вы можете изменить выделение, наведя курсор на текст, обработчик «щелчок» — не лучший способ обработки выделения (в данном случае изменение выделения не будет обнаружено).

2. Я получаю тот же результат, что и событие «щелчок». Предположим, что сейчас текст не выделен. Я щелкаю между «а» и «б». затем смещение фокуса будет равно 1. Теперь выберите «abc», и смещение фокуса будет равно 3. «abc» теперь выделен. если я нажму между » a » и «b», теперь смещение фокуса будет равно «0». хотя, это должно быть «1». Если я снова нажму на ту же позицию, api вернет правильное/ожидаемое значение, равное «1». Мне нужно нажать два раза, чтобы это сработало. Но я хочу, чтобы это произошло с первого события click/selectionchange.

3. Если вы нажмете на существующий выбор, getSelection() вернет тип = «Нет». При следующем щелчке вы получите тип = «Каретка». Не уверен, что вы можете изменить это поведение. Возможно, попытаться повторно запустить то же событие щелчка на том же событии (пытался, но в моем тестовом коде это не сработало).

Метки: