JavaScriptについて、困っています。

質問

マウスで選択されているテキストを表示できないでしょうか

調べた中で一番近かったのが
http://h2js.seesaa.net/article/88952666.html
こちらで紹介されています。

・ただしそれだとIEでは使えないのでIEで使えるようにしたいです。
document.getSelection()はIEで使用できないので、
IEで実装されているdocument.selection()に変えたのですが
上手くいきませんでした。

・また動作する場所を限定されていますが、
限定しないでページ内すべてのテキストで使えるようにしたいです。

恥ずかしい話、質問者はJavaScriptがほとんどわからないので
お手数ですがJavaScriptを書いてもらえると助かります。

よろしくお願い致します。

回答No.4

Dumper

mousemove監視が働きっぱなしなのも良くないのでflagもつけました.
丁度別質問の回答に似た動作がありましたので.
■ リアルタイム
<script type="text/javascript">
var sflag = 0;
document.onmouseup = function(){ sflag = 0; }
document.onmousedown = function(){ sflag = 1; }
document.onmousemove = function() {
var rng;
if(sflag && ( rng = document.getSelection? document.getSelection() : document.selection ? document.selection.createRange().text: '') ){
document.getElementById("text2").value = rng;
}
}
</script>
<input type="text" id="text2">

回答No.3

auty

＞＞＞　選択範囲が限られましたが

サンプルは、選択の有効範囲が指定できることを表しています。
つまり、
　　　<p onmousemove="selectStr()">
がある所のみ有効に出来るということですね。

＞＞＞　別のテキストを選択するまで消えないように出来ないでしょうか

これは、「選択されている文字列」が空のときは変更しなければ良いですね。
---------------------------------------------------------------------
function selectStr() {
var textElem = document.getElementById("text1");
var str ;
if (navigator.appName.indexOf("Microsoft") > -1) {
if (document.selection) {
str = document.selection.createRange().text;
} else {
textElem.value = "参照不可";
return;
}
} else {
str = document.getSelection();
}

if (str!="") textElem.value =str;
}

回答No.2

Dumper

どういうきっかけにしたいかでイベントの種類が違います。
希望のタイミングなどがあれば、それを書けばレスがきっと入りますよ。
■ サンプルと同じきっかけ マウスアップ
<script type="text/javascript">
document.onmouseup = function() {
document.getElementById("text1").value = document.getSelection? document.getSelection() : document.selection ? document.selection.createRange().text: '';
}
</script>
<input type="text" id="text1">
<br>

■ マウスで選択 → リアルタイム表示
<script type="text/javascript">
document.onmousemove = function() {
document.getElementById("text2").value = document.getSelection? document.getSelection() : document.selection ? document.selection.createRange().text: '';
}
</script>
<input type="text" id="text2">

お礼

回答ありがとうございます。２つも書いていただいて感謝しています。
希望のタイミングを書く必要があったのですね。
onmousemoveのリアルタイム表示がわかりやすくていいと思います。

実際に使ってみてみましたら、
見事に選択されたテキストが表示されました。

ただ他のスペースをクリックすると消えてしまいます。
別のテキストを選択するまで消えないように出来ないでしょうか

回答No.1

auty

以下のコードを試してしてみてください。
--------------------------------------------------------------------
function selectStr() {
var textElem = document.getElementById("text1");
if (navigator.appName.indexOf("Microsoft") > -1) {
if (document.selection) {
textElem.value = document.selection.createRange().text;
} else {
textElem.value = "参照不可";
return;
}
}

textElem.value = document.getSelection();
}

お礼

回答ありがとうございます。
選択範囲が限られましたが見事IEで表示できました。