テキストをドラッグ

[新着] Webテンプレートを仮オープンしました

0   名前： 篠　田 ： 2006/12/16（土） 01:00  ID:QlNboTKW
こんにちは。篠田と申します。

<DIV ID="kara">ドイツで販売されているミネラルウォーターの中で最も値段が高い物は「六甲の美味しい水」である。</DIV>

という範囲のテキストをドラッグで選択するとき、開始タグのところをポイントして
次に終了タグ直前の文字をポイントすると、自動的に選択状態になるようにすること
はできますか。できれば、どう書けばよいか教えてほしいのですが。
できれば、クロスで使いたいです。createRangeをいろいろいじってみたのですが、疲れ
ました。お願いします。
1   名前： 元帥 ： 2006/12/16（土） 01:00  ［URL］  ID:5ngCu.V6
textareaやinput type="text"等で文章を用意。
デザインが気に入らないならCSSで変更。
fucusとselectメソッドを使う。
で、どうでしょう？
2   名前： ラブーフ ： 2006/12/16（土） 01:00  ID:mGMjLPPf
答えにはなりませんが、この手のって、マウスのトリプルクリック(文字列上で３回連続のクリック)で選択できるような気がします。
3   名前： 匿名 ： 2006/12/16（土） 01:00  ID:xW5M8fMp
とりあえず、Gecko 系に限った話。

>>0
> 開始タグのところをポイントして次に終了タグ直前の文字をポイントすると、自動的に選択状態になる

まず基本的な話として、DOM2 Range に従えば 2 通りの考え方がある。

・div 要素ノードの 0 番から 1 番まで。
・div 要素ノードの内容であるテキストノードの 0 番目から 46 番目まで。

Range オブジェクトを作って、setStart と setEnd で範囲を指定する。この数え方は XPointer にも応用できるので、覚えておいて損はない。


もっとも、今回の件に限っては、以下のように selectNodeContents を使った方が楽。範囲を確定させた Range オブジェクトを Selection オブジェクトに追加すれば、表示上も選択状態になる。

var n = document.getElementsByTagName ('div')[0];
var r = document.createRange ();
var s = getSelection ();

r.selectNodeContents (n);
s.addRange (range);


IE/WE に関してはパス。
一覧へ戻る