マウスクリックした地点のテキストを読み込みたい

解決済

質問者：haru44
質問日時：2006/01/24 16:57
回答数：3件

マウスクリックした地点(X,Y座標)に表示されている文字を取得したいのですが、何か方法はありますでしょうか？
文字がないところや画像の場合は何も取得できなくても構いません。
特定のタグで囲まれている文字ではなく、BODY の中で特にタグに囲まれていないテキストを取得したいのです。
単なる文字が取得できるだけでも良いのですが、文章や段落も特定したいので、できれば、HTML中の何文字目なのかということがわかるとありがたいのですが…

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： BLUEPIXY
回答日時：2006/01/24 19:17

とりあえず、サンプルとして、一文字を取り出すものを作ってみました。

ＩＥのみで動作します。
文字は、取り出したい文字の先頭付近をクリックします。
（そういう感じにしないと次の文字が取り出されます）
----------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>サンプル</title>
<script language="JScript">

</script>
</head>
<body onclick="clickChar()">
<h1 class=title>タイトル文字などもある</h1>

文字列が、地の文として入力されている。</br>
クリックされた文字を取り出す。
<hr>
<address>
mailto: your@email.ne.jp<br>
</address>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

サンプルソースまで掲載していただき、感謝です。
おかげさまで、マウスクリックした地点の文字を取り込むことができるようになりました。

通報する

お礼日時：2006/02/14 09:36

No.3

回答者： Chaire
回答日時：2006/01/26 20:43

Firefox/Safari 用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>サンプル</title><script type="text/javascript">

addEventListener ('load', function () {
////////////////////

function getSelectedChar (root) {
var s = window.getSelection (); // Opera の document.getSelection ではうまくいかない
var n = s.anchorNode;
var i = s.anchorOffset;
return { strChar : n.nodeValue.charAt (i), index : isContainerOf (root, n) ? countCharOffset (root, n, i) : null };
}

function isContainerOf (root, textNode) {
var cn = textNode;
while (cn = cn.parentNode) if (cn == root) return true;
return false;
}

function countCharOffset (root, textNode, charOffset) {
var tw = document.createTreeWalker (root, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ENTITY_REFERENCE, null, true);
var cn;
var i = charOffset;
while ((cn = tw.nextNode ()) && (cn != textNode)) i += cn.nodeValue.replace (/^\s+/, '').length;
return i;
}

// for test
document.body.addEventListener ('click', function () {
var node;
var s;

node = document.getElementsByTagName ('body')[0];
s = getSelectedChar (node);
alert ( s.strChar + ' (' + s.index + ' th in ' + node.nodeName + '-element)');

node = document.getElementsByTagName ('p')[0];
s = getSelectedChar (node);
alert ( s.strChar + ' (' + s.index + ' th in ' + node.nodeName + '-element)');
}, false);

//////////////////////
}, false);

</script></head><body>
<h1>サンプル</h1>
<p>文字列が、<strong>地の文として</strong>入力されている。クリックされた<em>文字</em>を取り出す。</p>
</body></html>

参考URL：http://lxr.mozilla.org/mozilla/source/content/ba …