На событии выделения текста?

Question

Мне любопытно, если кто-нибудь знает, как я мог бы запустить функцию, если / когда пользователь заканчивает выбор текста на веб-странице?Я хотел бы, чтобы пользователь мог выбирать текст, и после небольшой задержки (или сразу, на данный момент это не имеет большого значения) рядом с текстом появляется кнопка наложения, которую пользователь может затем нажать, и я возвращаюсь и запускаюбольше моего кода, который основан на выборе.Это для расширения Firefox.

Подобный пример, о котором я могу подумать, будет похож на IE, где вы можете выбрать текст, а затем он вызывает «веб-ускорители».Я на 99% уверен, что знаю, как на самом деле наложить кнопку и получить позицию выделенного текста, но я понятия не имею, как проверить, есть ли что-то выбранное, не выполняя какой-то бесконечный цикл, которыйпросто кажется ужасной идеей.

Заранее спасибо!

РЕДАКТИРОВАТЬ:

//In my overlay.js with the rest of my sidebar code
isTextSelected: function () {   
        var myText = cqsearch.getSelectedText();
        var sidebar = document.getElementById("sidebar");
        var sidebarDoc = sidebar.contentDocument || document;

        var curHighlightedDiv = sidebarDoc.getElementById("testDiv");
        curHighlightedDiv.innerHTML = "Current text selection:" + myText;
    }
};

//In my on firefox load function I added this
document.onmouseup = cqsearch.isTextSelected;

Так вот, что я придумал, используя предложение Роберта, и потребовалосьу меня какое-то время все получается в нужном месте, но прекрасно работает!Теперь, чтобы установить мою кнопку.Спасибо за тонну!

Answer 1

Нет никакого onhighlightext или чего-либо подобного, но решением было бы связать onmouseup, чтобы проверить, выбран ли какой-либо текст, если это не в input / textarea.

Редактировать

Вот пример реализации для вас.Я проверял это только в Chrome / Firefox / IE7.Это работает и для входных данных.

http://jsfiddle.net/qY7gE/

Код из JSFiddle :

var t = '';
function gText(e) {
    t = (document.all) ? document.selection.createRange().text : document.getSelection();

    document.getElementById('input').value = t;
}

document.onmouseup = gText;
if (!document.all) document.captureEvents(Event.MOUSEUP);

<input type='text' id='input' />
In software, a stack overflow occurs when too much memory is used on the call stack. The call stack contains a limited amount of memory, often determined at the start of the program. The size of the call stack depends on many factors, including the programming language, machine architecture, multi-threading, and amount of available memory. When too much memory is used on the call stack the stack is said to overflow, typically resulting in a program crash.[1] This class of software bug is usually caused by one of two types of programming errors.[2]

Answer 2

Немного опоздал на вечеринку, но для дальнейшего использования ...

Посмотрите на событие select DOM на MDN .

Он срабатывает после отпускания мыши или клавиши (по крайней мере, в Chrome 40).

document.addEventListener('select', callback);

Answer 3

Существует собственное событие, когда выбор текста производится / изменяется.selectionchange имеет базовую поддержку в большинстве браузеров, включая IE , и будет работать с любым текстом в документе, а не только с элементами формы.

document.addEventListener("selectionchange",event=>{
  let selection = document.getSelection ? document.getSelection().toString() :  document.selection.createRange().toString() ;
  console.log(selection);
})

select this text

Обратите внимание, поскольку его название подразумевает, что оно срабатывает при любом изменении выбора.Таким образом, вы будете получать несколько вызовов для вашей функции обратного вызова при выборе текста.

Answer 4

Я думаю, у @ patrick-evans был правильный ответ. Это просто самый дальновидный и поддерживаемый API ответ - вам просто нужно отменить событие, чтобы остановить поток.

Я не могу опубликовать ответ, но учтите это

function debounce(fn, delay) {
  let timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
};

document.addEventListener("selectionchange", debounce(function (event) {
  let selection = document.getSelection ? document.getSelection().toString() :  document.selection.createRange().toString() ;
  console.log(selection);
}, 250));

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad est veniam facere culpa expedita optio iste labore doloremque autem illo, in voluptatibus error ea, ab reprehenderit placeat facilis animi iure?

Answer 5

Я бы посоветовал слушать событие mouseup, а не selectionchange, так как последний запускает довольно много событий (вплоть до выбранных символов), вам нужно подождать некоторый произвольный период, чтобы получить окончательный выбор.То же самое @Robert и @Makyen, я создал для вас код для игры:

<!DOCTYPE html>
<html>
<body>
  <div onmouseup="showSelection()">
    <p>Select some of the text. You can also listen to the mouseup event at the &lt;p&gt; level</p>
    <p>Anthoer paragraph and text</p>
    <input type="text" value="Hello world!" onselect="showSelection()">
  </div>
  Outside of div, selection won't work as there is no listener if you don't uncomment the line: document.onmouseup = showSelection
  
  <script>
  // document.onmouseup = showSelection // listen to the mouseup event at document level
  
  function showSelection() {
    console.log('Selection object:', window.getSelection()) // same as document.getSelection()
    console.log('Selected text:', window.getSelection().toString())
  }
  </script>
</body>
</html>

Answer 6

Просто обработайте событие mouseup , так как пользователь «отпускает» клавишу после выделения:

Ваниль JS

//Directly within element
<p class='my_class' onmousedown="my_down_function()" onmouseup="my_up_function()">

//On element
my_element = document.querySelector('.my_class');
my_element.onmousedown = function (e) { my_down_function(e); };
my_element.onmouseup function (e) { my_up_function(e); };

JQuery

$('.my_class').mousedown(function() {
    my_down_function()
})
$('.my_class').mouseup(function() {
    my_up_function()
})

Azle

az.add_event('my_class', 1, {
    "type" : "mousedown",
    "function" : "my_down_function()"
})
az.add_event('my_class', 1, {
    "type" : "mouseup",
    "function" : "my_up_function()"
})

Answer 7

Решение с использованием трюка с мышью не является правильным решением.Это хакерский способ и не идеальный.Менее эффективно, так как вы теперь ловите мышиные мыши для такого большого количества дерьма.

Реальный способ сделать это в аддоне Firefox - это использовать addSelectionListener, см. Эту тему: Наблюдать за выделением?

Теперь, даже если пользователь использует клавиатуру для выбора, он пойман.

Благодарим Нейла за подсказку, где его найти в MXR