Блог

Главная - Вопросы по программированию - Как я буду показывать диалоговое окно при выборе любого текста на странице с помощью jQuery?

Как я буду показывать диалоговое окно при выборе любого текста на странице с помощью jQuery?

#jquery #jquery-ui #html #text

#jquery #jquery-пользовательский интерфейс #HTML #текст

Вопрос:

У меня есть веб-страница, полная текста «допустим, как на этой странице». Я не имею в виду «элемент ввода», я имею в виду, что любой текст был написан с

или, … и т.д. теги.

Когда я выбираю некоторые слова, появляется всплывающее окно Или мини-диалог с некоторыми опциями, скажем, ссылка на выбранный текст электронной почты или копирование или печать.

Это похоже на то, когда вы находитесь в любом браузере и выделяете некоторый текст, а затем щелкаете правой кнопкой мыши по этому выделенному тексту, и появляется меню (встроенное в ваше OS-window-).

я хочу ту же историю, но диалоговое окно отображается сразу после выбора. не нужно щелкать правой кнопкой мыши.

Я читаю «UI / API / 1.8 / Dialog»http://docs.jquery.com/UI/Dialog и «.mouseup()»http://api.jquery.com/mouseup / а также я нашел эту замечательную статью здесь http://motyar.info/blog/2010/02/get-user-selected-text-with-jquery-and.html

Но все еще не могу создать нужную мне функцию. Может быть, это просто, но я этого не вижу 🙂

Ценю ваш вклад! Спасибо!

Ответ №1:

Вы можете получить выделенный текст при наведении курсора мыши с помощью некоторого кода, подобного этому:

 $(document).mouseup(function (event) {
    var text = document.selection.createRange().text;
    if (text != "") {
        //Use text in popup, etc... SAMPLE:
        alert(text);
    }
});

Ответ №2:

Вместо .mouseup() Я думаю, вы хотите использовать .select() :

http://api.jquery.com/select/

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

1. Я думаю, что это не будет работать ни с каким текстом, кроме элементов ввода. «Это событие ограничено полями <тип ввода =»текст»> и полями <текстовая область>». из этого jQuery.

2. Вы могли бы оформить текстовую область так, чтобы она выглядела / действовала как <div> . Возможно, это не лучшее решение, но, безусловно, может сработать.

3. Я мог бы сделать textarea похожим на div или любой семантический тег из HTML5, но он функционирует не так. Пользователи должны иметь возможность выбирать, но не вводить что-либо. Там было бы много таких тегов просмотра «text» <p> или<span>, … и т.д. Таким образом, наличие textarea не было бы идеальным решением.