WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:JavaScriptで選択データの特定

0:[投稿] 真由 [2002/12/10 14:13 ][環境:WIN+IE JSP]

はじめまして。
JavaScriptでプログラミングを始めたばかりの者です。
ブラウザのテキストエリアに"あいうえおう"と入力し、一番目の"う"をマウスで選択して右クリックが押され時に二番目ではなく一番目の"う"が選択されたことを判断したいのですが、JavaScriptでどのように記述すればよいか教えて下さい。


1:[回答] ふじ [URL] [2002/12/10 15:33 ]

解答ではないのですけど。

http://www.parkcity.ne.jp/~chaichan/qanda/qa3440.htm#r19
これと似ていますね。

http://www.parkcity.ne.jp/~chaichan/qanda/qa3448.htm
これも。もしかして同じかたですか?
# 違ったらごめんなさい。


2:[回答] 真由 [2002/12/10 16:04 ]

ふじさんが紹介してくれたURL見ました。
少し似ているようですが参考にはなりませんでした。
初めて投稿しましたのでわたしではありません。


3:[回答] ふじ [URL] [2002/12/10 18:34 ]

これは失礼しました。

私にはこの問題の直接の解決法は思いつかないのですが、
ところで、なにゆえそういうことがしたいのでしょう?
# どういう場面で使われるのか、ちょっと思いつきませんでした。

最終的な目的によっては、もしかして別の切り口での解法があるかもしれませんし。


4:[回答] ひじ [2002/12/10 23:18 ]

この問題のポイントは3点。
1. マウスで選択した範囲を取得する。
2. 選択されたテキストがどの位置にあるか取得する。
3. 右クリックされたのを判断する。

このうち、1と3は既出です。
1. については、 selection をキーにして検索、 3. については、 oncontextmenu をキーにして検索してみて下さい。

問題は2. です。
document.selection.createRange() で TextRange オブジェクトを得るところまでは行くのですが、そこから先が分かりません。

http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_textrange.asp
を見ると、
1. parentElement メソッドで親オブジェクトを得る
2. 1. で得たオブジェクトに createTextRange メソッドを適用して親要素全体の TextRange オブジェクトを得る。
3. 選択範囲の TextRange オブジェクトと 2. のオブジェクトを compareEndPoints メソッドで比較。返り値が 0 なら終了
4. 2. の TextRange オブジェクトに moveStart メソッドを適用して、1文字ずらす。
5. 3. にもどる

というのでできそうな気もしますが、確認していません。


5:[質問] 真由 [2002/12/11 13:35 ]

ひじさんが教えてくれたことを確認してみたところ下記コードにより問題2の1.と2.はできました。

var a = document.selection.createRange();
alert(a.text);
var b = a.parentElement();
var c = b.createTextRange();
alert(c.text);

わからないのは3のcompareEndPointsメソッドの使い方です。
このメソッドについて調べてみたところ、下のURLを見ると内容と構文については書かれていますが、使用例は書かれていません。

http://www.microsoft.com/japan/developer/library/jpisdk/dhtml/references/methods/compareEndPoints.htm#compareEndPoints

この問題を解決する場合、object.compareEndPoints(type, range) は、どのように記述すればよいでしょうか?


6:[回答] ween [2002/12/11 17:39 ]

<input type="text"> 内のテキスト選択ならば compareEndPoints を繰り返さなくても
 c.setEndPoint("EndToStart",a);     // c の終点を a の始点まで移動
とすれば c.text.length で選択範囲の位置を特定できます。

createTextRange メソッドを持たない一般の要素内のテキスト選択の場合は
 c=document.body.createTextRange(); // body 要素から TextRange を生成
 c.moveToElementText(b);            // 範囲を b 内のテキストに移動
とし、あと同様に setEndPoint を行えばいいと思います。

<textarea> 内のテキスト選択の場合は、後者の方法になるようです。
textarea から生成した TextRange と selection から得た TextRange では
互いに setEndPoint ができないようでした。(以上Win2K+IE6で確認)


7:[質問] 真由 [2002/12/12 11:47 ]

weenさんに教えてもらったことを確認してみたら下記コードにより選択されたテキストがどの位置にあるかを取得できました。
どうもありがとうございました。

  var a = document.selection.createRange();
  alert(a.text);
  var b = a.parentElement();
  var c = b.createTextRange();
  alert(c.text);

  c=document.body.createTextRange();
  c.moveToElementText(b);
  alert(c.text);
  c.setEndPoint("EndToStart",a);
  alert(c.text);
  alert(c.text.length);

1.ここで選択されたテキストの前後に、右クリックで表示されるコンテキストメニュー("A"、"B"、"C"等)から選択された文字列でタグを挿入し、テキストエリアに表示したいのですがどのように記述すればよいでしょうか?

例).テキストエリアに"あいうえおう"と入力し、一番目の"う"をマウスで選択して右クリックが押され時に表示されるコンテキストメニューから"B"を選択した場合

<p>あい</p><p 項目属性="B">う</p><p>えおう</p>

*<p>は任意の要素です。

2.選択されたテキストの色やフォントの大きさを変えたりすることはJavaScriptで可能でしょうか?
可能であれば、どのようにすればよいか教えて下さい。


8:[関連] キリちゃん [2002/12/12 17:08 ]

いつもWEB相談室をROMしてるんですが、疑問に思ったんで一言。
ここはあくまでも相談室であり
質問に答える事が本来の姿だと思います。
(Webページ作成に関しての何でも掲示板と書いてあります)

ふじさんは真由さんに対し正体を探る事ばかり書き、
結果として問題解決に貢献していませんよね。
過去の質問者と同一人物か、どういう場面で使うのか等、
そんな関係の無い事を聞くのって一体・・?って思いました。

他のトコでも、かなり言い方がキツイので
以前からおかしいと感じていました。
今回はチョットひどいので書かせて頂きました。
利用者が利用しやすい掲示板になってもらいたいです。

P.S.
真由さん・・質問中なのに突然書いてしまいごめんなさい。



9:[関連] Malic [2002/12/12 17:47 ]

>過去の質問者と同一人物か、どういう場面で使うのか等、

同一人物か、は関係ないけど
どういう場面で というのは重要なこともある。
(考え方そのものが間違っていることもあるし。別の解だってあるかもしれないし)


10:[回答] ふじ [MAIL] [URL] [2002/12/12 18:18 ]

> ふじさんは真由さんに対し正体を探る事ばかり書き、
>>7

http://www.parkcity.ne.jp/~chaichan/qanda/qa3440.htm#r19
の例は、ほとんど同じに見えます。
しかも、そう一般的に質問される (FAQ的な) ことでもないし、
偶然にしては珍しいことだと思ったので。

ハンドルを複数使用することについては (自分はしませんが) かまわないと
思っていますが、仮に同一人物が同じような質問を別ハンドルでされると
効率が悪いので、確認したわけです。
# 同一人物であるとわかっていれば、先の質問に対する返事は読んでいることを
# 前提に話ができます。

正体を探っているようにみえて気分を害されたなら、すみません。

> どういう場面で使うのか等、
> そんな関係の無い事を聞くのって一体・・?って思いました。
質問に答える、というのが、たとえば
「これこれを JavaScript で書くにはどうすればいいのか」
ということに対して直接的な解を示す、ということ「のみ」である
とすれば、確かに関係がないですね。

しかし、大抵の場合は実現したいこと(アプリケーションとしての機能、要求仕様)
があるはずで、要求仕様を満足するためには、質問者が思いついた方法で
実現しなくてはならない、ということは必ずしもない、わけです。

そこまで立ち入るのはおせっかいである、質問の直接の解法が分からないのだったら
黙っておれ、ということであれば、余計な口を差し挟んですみません。

これ以上続けるのは質問者のかたに悪いのでこれで終わりにしますが、
よろしければ
> 他のトコでも、かなり言い方がキツイので
の具体例を、メールで送っていただけますでしょうか。反省します。


11:[回答] ちゃいぱ [2002/12/12 21:29 ]

>>8
実は、私もふじさんと同じ思いでした。
しかし、
>他のトコでも、かなり言い方がキツイので
は、そんなことは、ないと思いますよ。
ふじさんの回答は、いつも注目していますので...。


12:[回答] 謎の人R [2002/12/13 04:12 ]

>> 7
そういうことならむしろ以下が参考になるような?
http://tohoho.wakusei.ne.jp/wwwxx016.htm
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/execcommand.asp

※まさにふじさんが言及されていた『質問者が思いついた方法で
実現しなくてはならない、ということは必ずしもない』ですが。

>>8
いつもROMだけだとわからないかもしれませんが、質問に答えるためには、どういう場面で使うのか等、もっと具体的な情報が必要な場合が多いです。回答者は「神様じゃない」ので。

その意味では、全然キツいことないです。
※初心者であっても質問を理解してもらう努力は、初心者なりに必要。
※というか、問題解決に貢献しないのにそんな関係の無い事を投稿するのって一体・・?って思いました。


13:[回答] 匿名 [2002/12/13 18:54 ]


> 回答者は「神様じゃない」ので

私から見れば彼は神様だよ。ギャラが発生しそうな質問形式や質問領域でも躊躇なく大岡裁きしているじゃないの。そのような好青年に反感を抱く方がいらっしゃるとは、世間は広いのね。


14:[回答] 中立派 [2002/12/13 19:22 ]

***回答以外のことはこれで終了にしましょうよ。***
一緒に問題を解決できるよう導いてあげるのが一番ですよ!


15:[回答] gun [2002/12/18 09:03 ]

私も回答ではありませんが・・・

真由さんの質問から脱線してしまったので、
真由さんが、まだ解決されてないようでしたら、
このスレッドは一旦[完了]して、
質問を整理なさった後に別途再投稿しないと、
回答がつかないように思います。


16:[完了] 真由 [2002/12/18 12:29 ]

gunさんのいうとおり、もう一度問題を整理してから改めて再投稿しようと思います。どうもありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World