2016-03-21 11 views
-2

ユーザーがWebページでテキストを選択したときに警告を表示したい。 アラートには、ユーザーが選択したテキストと同じテキストを使用する必要があります。のテキストのみを選択すると、のアラートが表示されます。JavaScriptでwindow.selection()を使用しているときに警告ボックスが表示されませんか?

私が試した2つの異なるアプローチ。

var range = window.getSelection().getRangeAt(0); 
var selectionContents = range.extractContents(); 
alert(selectionContents); 

出力: ませアラートBOX

var selObj = window.getSelection(); 
var selectedText = selObj.toString(); 
alert(selectedText); 

出力:空の警告ボックス。

参考文献:
https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection https://developer.mozilla.org/en/docs/Web/API/Selection

+1

多分何かがnullの場合、コンソールをチェックしてください。 –

+2

実行中の問題は、テキストが選択されたときに発生するイベントがないため、アラートを起動することができないということです。 – Fhtagn

+0

どのようなイベントを行う必要がありますか?私は[link](http://www.w3schools.com/jsref/dom_obj_event.asp)にチェックしました。私は2日間詰まった簡単なスニペットを提供してください。 –

答えて

1

通常、選択する要素をクリックを必要とするので、あなたは、イベントハンドラで、あなたのロジックを配置する必要があり、clickイベントが動作するはずです。ユーザーがキーボードを使用してテキストを選択している場合は、ハンドラをkeyupイベントにバインドすることもできます。

私はページbodyを使用しましたが、あなたのテキストに好きなものは他にも使用できます。

HTML:

<body>Some text to select. Only alert when "Some text" is highlighted.<body> 

Javascriptを:

// add event listener to table 
document.body.addEventListener("click", function(){ 
    var selObj = window.getSelection(); 
    var selectedText = selObj.toString(); 
    if (selectedText === "Some text") { 
     alert(selectedText); 
    } 
}, false); 

https://jsfiddle.net/jj8yoa8L/1/

+0

この解決方法の問題は、ユーザーがWebページを何もクリックしなくても空の警告がスローされることです。正しい解決策は、ユーザーがテキストを選択し、イベントハンドラをクリックして回転しない場合にのみ警告する必要があります。それに代わるものがなければならない。 –

+0

ありがとうございますdownvotingありがとう、あなたの答えは正しいとマークされました –

+0

selectedTextがいくつかの値と等しい場合、私は警告しているので、私のコードで空の警告を持つ方法はありません。あなたは間違いを犯してそれをコピーしたに違いありません。投票を歓迎します。ソリューションを求める前にコードをチェックしてください。 –

関連する問題