Я хочу, чтобы словарь открывался, если пользователь кликает на любое слово на веб-странице. Пока это работает следующим образом:
let str = window.getSelection().toString();
window.open("https://en.thefreedictionary.com/" + str, "_blank").focus();
Но теперь я хочу, чтобы пользователь мог выбирать несколько слов, и когда он дважды щелкает по этому выделению, словарь или инструмент перевода должен автоматически открываться.
На веб-странице есть предложение “I support you as long as you need it.” Если я выберу “as long as” и двойным кликом щелкну по нему (например, над словом long), то window.getSelection().toString() просто вернет “long”, а не “as long as”. Так почему же выделение стирается при двойном клике?
Как я могу это исправить?
Ответ
Чтобы решить проблему с методом window.getSelection(), который не возвращает правильный результат при двойном клике, необходимо изменить способ обработки событий на странице. По умолчанию, в браузерах двойной клик обрабатывается как два одиночных клика, что приводит к тому, что текстовое выделение сбрасывается.
Для того чтобы открыть словарь при двойном клике на выделенном тексте, мы можем использовать обработчик событий для двойного клика (dblclick). Мы также можем установить небольшой таймер, чтобы дать возможность пользователю завершить выделение перед тем, как мы будем обрабатывать событие. Вот пример кода, который решает вашу задачу:
let timer;
document.addEventListener('dblclick', function () {
// Устанавливаем таймер, чтобы дать время завершить выделение
clearTimeout(timer);
timer = setTimeout(() => {
let selectedText = window.getSelection().toString();
if (selectedText.length > 0) {
window.open("https://en.thefreedictionary.com/" + encodeURIComponent(selectedText), "_blank").focus();
}
}, 100); // Задержка в 100 мс
});Объяснение кода:
addEventListener('dblclick', ...): Мы добавляем обработчик событий на все двойные клики по документу.clearTimeout(timer);: Сброс существующего таймера при каждом новом двойном клике, что предотвращает выполнение предыдущего кода.setTimeout(() => {...}, 100);: Установка задержки в 100 миллисекунд перед выполнением функции, что позволяет Пользователю выделить текст, прежде чем мы его считываем.window.getSelection().toString();: Получаем выделенный текст.window.open(...).focus();: Если выделен текст, открываем новый вкладку с запросом к словарю.
Как использовать:
- Вставьте код в скрипт вашего веб-приложения (например, в теге
<script>в HTML). - Убедитесь, что у вас есть доступ к интернету, чтобы открывать ссылки на словарь.
- Теперь, когда вы выделяете текст и выполняете двойной клик на выделении, автоматически открывается новый вкладка со словарем.
Этот подход гарантирует, что выделенный текст корректно считывается, и открывается нужная страница без нежелательных конфликтов с поведением браузера.