web-dev-qa-db-ja.com

テキストハイライトイベントで？

ユーザーがWebページ上のテキストの選択を終了した場合に実行する機能をトリガーする方法を誰かが知っている場合は、興味がありますか？ユーザーがテキストを選択できるようにしたいと思います。少し遅れて（またはすぐに、この時点では重要ではありません）テキストの近くにオーバーレイボタンが表示され、ユーザーがクリックして戻ることができます選択に基づいた私のコードの多く。これはFirefox拡張機能用です。

私が考えることができる同様の例は、IEのようになります。ここでテキストを選択すると、「ウェブアクセラレータ」が表示されます。ボタンをオーバーレイし、選択したテキストの位置を取得しますが、何らかの無限ループを行うことなく、選択されたものがあるかどうかを確認する方法がわかりません。

編集：

//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;

だから、これは私がロバートの提案を使用して思いついたものであり、すべてを適切な場所に入れるのに時間がかかりましたが、うまくいきます！次に、ボタンを配置します。

javascriptfirefox-addondom-events
58
Robert Smith

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]
71
Robert

パーティーに少し遅れましたが、将来の参考のために...

[〜＃〜] mdn [〜＃〜] のselect DOMイベントを見てください。

マウスまたはキーを離すと起動します（少なくともChrome 40）。

document.addEventListener('select', callback);

8
jarsbe

テキストの選択が行われた/変更されたときのネイティブイベントがあります。 selectionchange には IEを含むほとんどのブラウザでの基本的なサポート があり、フォーム要素だけでなくドキュメント内の任意のテキストに対して機能します。

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

その名前が示すように、選択が変更されると起動することに注意してください。したがって、テキストを選択すると、コールバック関数への複数の呼び出しを取得します。

5
Patrick Evans

@ 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?
1
waffledonkey

後者は非常に多くのイベント（選択された文字まで）を起動するため、selectionchangeではなくmouseupイベントをリッスンすることをお勧めします。最終選択を取得するには、任意の期間待機する必要があります。 Ditto @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>
1
Marshal

Mouseupトリックを使用したソリューションは適切なソリューションではありません。それはハッキーな方法であり、完璧ではありません。あまりにも多くのがらくたのmouseupをキャッチしているため、あまり効率的ではありません。

Firefoxアドオンでそれを行う実際の方法は、addSelectionListenerを使用することです。このトピックを参照してください。 強調表示のために監視しますか？

ユーザーがキーボードを使用して選択を行った場合でも、キャッチされます。

MXRでそれを見つける場所を教えてくれたNeilの功績

0
Noitidart

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()
})

アズール

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