テキストハイライトイベント時?
2023-09-08 06:54:46
質問
私は、ユーザーがWebページ上でテキストを選択し終わったら、または一旦実行する関数をトリガーする方法を知っている人がいれば知りたいです。私は、ユーザーがテキストを選択でき、短い遅延 (またはすぐに、この時点ではあまり重要ではありません) の後に、ユーザーがクリックできるテキストの近くにオーバーレイ ボタンが表示され、私が戻って選択に基づいて私のコードの多くを実行できるようにしたいです。これは、Firefox 拡張機能のためのものです。
私が思いつく似たような例は、IE でテキストを選択すると、Web アクセラレータが表示されるようなものです。実際にボタンをオーバーレイして、選択したテキストの位置を取得する方法は 99% わかっていますが、ある種の無限ループを実行せずに、選択したものがあるかどうかを確認する方法がわかりません。
EDIT。
//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;
これはRobertの提案を使って思いついたもので、すべてを正しい位置に配置するのに少し時間がかかりましたが、とてもうまくいきました。次に、ボタンを配置します。
どのように解決するのですか?
には
onhighlightext
などがありますが、解決策としては、バインディングで
onmouseup
にない場合は、テキストが選択されているかどうかをチェックするために
input
/
textarea
.
編集
以下は実装例です。Chrome/Firefox/IE7でしかテストしていません。入力でも動作します。
のコード 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]
関連
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] 動的に生成された要素にイベントバインディングを行うか?
-
[解決済み] テキストボックスのEnterキーで、JavaScriptでボタンクリックをトリガーする
-
[解決済み] jQuery get specific option tag text
-
[解決済み] イベントバブリング、キャプチャーとは何ですか?
-
[解決済み] イベントを発生させた要素のIDを取得する
-
[解決済み] JavaScriptでイベントを発生させるには?
-
[解決済み] キーアップ時ではなく、入力終了時にjavascriptの関数を実行しますか?
-
[解決済み] JavaScriptのグローバルイベント機構
-
[解決済み] DIVの全テキストをシングルマウスで選択する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] JavaScriptでの大文字小文字を区別しない正規表現
-
[解決済み] querySelectorAllがない場合、ライブラリを使用せずに属性で要素を取得する?