Виділений текстовий тригер події в Javascript

77

Як запустити функцію JavaScript, коли хтось вибирає даний фрагмент тексту на сторінці за допомогою миші?
Крім того, чи є спосіб знайти позицію виділеного тексту на сторінці?

Оновлення: Щоб бути більш зрозумілим, фрагмент тексту може бути частиною речення або слова, фрази або цілого абзацу.

javascript jquery

— ел-тіді
джерело

79

Події " Вибрано текст " немає (DOM), але ви можете прив'язати mouseupподію до document.body. У цьому обробнику подій ви можете просто перевірити

document.selection.createRange().text

або

window.getSelection()

методи. У Stackoverflow є декілька тем, як цей javascript, щоб отримати абзац вибраного тексту на веб-сторінці .

Я не впевнений, що ви маєте на увазі під "пошуком позиції", але, щоб залишитися в моєму прикладі, ви можете використовувати event propertysпозиції миші X + Y.

Приклад: http://www.jsfiddle.net/2C6fB/1/

— jAndy
джерело

Дякую, Енді, Я. Я думаю, що найкраще, що ми можемо отримати, це позиції X + Y миші.

5

Ви також повинні розглянути можливість вибору за допомогою клавіатури.

— Тім Даун

2

Існує подія "Вибрано текст" (DOM): w3schools.com/jsref/event_onselect.asp

— user681814,

4

Коли справа стосується вибору клавіатури, я спостерігав за тим, як користувач звільняє зміну:document.addEventListener('keyup', function(e) { var key = e.keyCode || e.which; if (key == 16) highlight(); });

— willlma

2

SelectionChange подія є кращим , оскільки window.getSelection()може повертати старі selectionоб'єкти на mouseupподії.

— Кані

60

Ось короткий змішувач:

$('div').mouseup(function() {
    var text=getSelectedText();
    if (text!='') alert(text);
});

function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

<div>Here is some text</div>

Демо: http://jsfiddle.net/FvnPS/11/

— karim79
джерело

6

Здається, існує загальноприйнята ідея, window.getSelection();еквівалентна IE document.selection.createRange().text;. Чи люди копіюють з того самого, неточного джерела? У будь-якому випадку, window.getSelection()повертає Selectionоб'єкт, тоді як document.selection.createRange().text;повертає рядок, який є зовсім іншим об'єктом. Плутанина виникає внаслідок того, що toStringметод Selectionоб'єкта повертає виділений текст, тобто, що alert(window.getSelection());сповістить вибраний текст.

— Тім Даун

Виправлено. У документах mozilla сказано: "Це робить об’єкт виділення схожим на рядок, коли він насправді є об’єктом зі своїми властивостями та методами. Зокрема, передається повертане значення виклику методу toString () об’єкта Selection". :) developer.mozilla.org/en/window.getSelection

— karim79

2

Хе. Я раніше цього не бачив. Вибачте, коли я відповів на вашу відповідь: як ви могли зробити висновок, я вже кілька разів виправляв це на SO.

— Тім Даун

2

@Tim Down - Ви не крилали, насправді були правильними і вчинили правильно, вказавши на це.

— karim79

11

Існує новий експериментальний API, який займається цим:

Подія selectionchange API Selection запускається, коли об'єкт виділення документа модифікується, або коли виділення, пов'язане з <input>або <textarea>змінами. Подія selectionchange запускається в документі в першому випадку, а в елементі у другому випадку.

https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange

Зверніть увагу, що це кривавий край і не гарантовано працюватиме навіть у великих браузерах.

— Рікі Хан
джерело

2

Хоча це посилання може відповісти на питання, краще включити сюди основні частини відповіді та надати посилання для довідки. Відповіді лише на посилання можуть стати недійсними, якщо пов’язана сторінка зміниться. - З огляду

— eisbehr

Я змінив відповідь

— Ricky Han

В останньому стандарті також відсутня основна властивість, яку можна вибрати; тому префікс постачальника все ще потрібен, оскільки кожен браузер реалізує його по-різному. Знову ж таки, це існує в ActionScript вже два десятиліття з моменту v1: help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/…

— Трійнко

1

AFAIK, немає такої події, яку ви описали. Але ви можете наслідувати цю функцію.

Шукайте тут код і демо.

— вікмалхотра
джерело

1

Дякую ShiVik, це дійсно корисно. Чи має ця емуляція залежність від браузера?

@abhishiktiwari - AFAIU щоденник - немає

— vikmalhotra

1

Існує подія "Текст вибрано". Але тільки для текстової області, як я вже знав.

<textarea onselect="message()" name="summary" cols="60" rows="5">
请写入个人简介，不少于200字！
</textarea>

— Макіст
джерело

0

var selectedText = "";

if (window.getSelection) {
    selectedText = window.getSelection();
}

if (document.getSelection) {
    selectedText = document.getSelection();
}

if (document.selection) {
    selectedText = document.selection.createRange().text;
}

function textSelector() {
   alert(selectedText);
}
textSelector();

— Маунешачар
джерело

0

Я не впевнений у тому, що стосується миші, але цей рядок працює для мобільних пристроїв, це викликається щоразу, коли вносяться зміни до виділення тексту -

document.addEventListener('selectionchange', () => {

});

— ozd
джерело

0

При натисканні кнопки миші mousedownподія запускається, коли кнопка миші відпускається, mouseupзапускаються clickподії , а потім .

Тож ми прослуховуємо mouseupподію і перевіряємо, чи вибрано якийсь текст, і виконуються відповідні операції.

const p = document.getElementById('interactiveText');

p.addEventListener('mouseup', (e) => {
  const selection = window.getSelection().toString();

  if (selection === '') {
    console.log('click');
  } else {
    console.log('selection', selection);
  }
});

— Даміан Чапієвський
джерело