Подтвердить что ты не робот

В текстовом событии?

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

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

4b9b3361

ОТВЕТЫ

Ответ 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 Qaru 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]

Ответ 2

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

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

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

document.addEventListener('select', callback);

Ответ 3

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

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

Ответ 4

Я бы посоветовал прослушивать событие 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>

Ответ 5

Я думаю, у @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?

Ответ 6

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

Реальный способ сделать это в Firefox addon - использовать addSelectionListener в этом разделе: Наблюдать за подсветкой?

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

Кредит Нейлу за то, что он меня опрокинул, где его найти на MXR

Ответ 7

Просто обработайте событие 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()"
})