セレクトボックスリンクのフォーカス。

Test


0   名前: 008 : 2005/07/27 00:28
TAG indexさんのセレクトボックスでリンクする(選択のみ)のタグを使用して
プルダウン選択式のリンクをつけようと思うのですが、このリンク方法は
選択するとリンク先が勝手に開きますよね?それはいいんですが、
とんだ後も、言い方があってるのか自信が無いですが、リンクがフォーカスされていて
ホイールを回すとリンク先がころころ変わってしまいます。

リンク先のスクロールを動かそうとするときにそんなことになってしまうので
とても面倒です。画面のどこかを一度クリックすればフォーカスは解けるん
ですが、こういうことをせずに選択してリンク先が開いた後はフォーカスが
解けるようにしたいんですが設定などで出来ることなんでしょうか?

お分かりになる方がいらっしゃったらどうぞご指導をどうぞよろしくお願いいたします。

追記
すみません。これは本当に初歩的な質問だと思うのですが、よく

if(target == 'top'){
top.location.href = url;
}

こういったのを見るのですが、これを

if(target == 'top'){top.location.href = url;}

というようにするといけないんでしょうか?この方が一つ一つはっきりして
分かりやすいと思うんですが、他にもタグの左側に広いスペースが
入れられていたりしているのを良く見ます。

素人はタグをつめて書いたり左に詰めて書いたりすると思うのですが
何かプログラム上のルールとかがあるんでしょうか?

質問の説明の仕方が分かりにくいかもしれませんがちょっと気になるので
教えていただけたらとてもうれしいです。

1   名前: 元帥 : 2005/07/27 00:28  [URL
> 設定などで出来ることなんでしょうか?

JavaScriptでフォーカスを解く事ができます。
セレクトボックスでリンクする(選択のみ) http://www.tagindex.com/javascript/link/select1.html
の例では、
document.form1.select.blur();
を書き加えます。
但しブラウザによっては、マウスがセレクトメニューの上にあれば、それがフォーカスとみなされるので、
フォーカスを解除しても、すぐにフォーカスされてしまいます。


> 何かプログラム上のルールとかがあるんでしょうか?

http://www.google.com/search?hl=ja&q=%E3%82%A4%E3%83%B3%E3%83%87%E3%83%B3%E3%83%88+OR+%E5%AD%97%E4%B8%8B%E3%81%92&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=lang_ja
結局の所、自由です。
# Fortranという言語は、七文字目以降からソースを記述という面倒な決まりが^^;

条件が成立した時、どの範囲まで処理が行われるのか分かり易いとは思いませんか?
while(条件){
  if(条件){
    処理1
    処理2
  }else{
    処理3
    処理4
  }/*ifの終わり*/
}/*whileの終わり*/


2   名前: 008 : 2005/07/27 00:28  [URL
元帥さん、お返事ありがとうございます!

すみません、どこに加えるんでしょう・・ JavaScriptはこちらのサイト
の様に分かりやすいサイトが無くて形成の基本を理解しようにもちょっと
難しくて全く分かりません。せっかく教えていただいたのにすみません。

インデント。見やすいようにスペースをわざと入れてるんですね。
知識が深くなってくるとその方が見やすくなるんですね。
タグ自体を見ても瞬間的に何のタグか分からない私にはまだまだ
到達できないレベルです。

あと、追加の質問になるんですが、以前に元帥さんに教えていただいた

http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=37

のプルダウン選択ボタン式のリンク方法を別窓ではなく、ページが切り替わる
ようにしたいんです。自サイトのトップページの右上に設置しているんですが
便利サイト直リンクのほうは別窓表示のままで、サイト内直リンクのほうを
ページが切り替わるようにしたいんですがどのようにしたらいいんでしょうか?

JavaScriptが同一ページで複数になるとJavaScriptごとに名前を変えて指定した
りしないといけないような気がしてその点も不安です。

引き続きどうぞよろしくお願いします。

3   名前: 元帥 : 2005/07/27 00:28  [URL
> すみません、どこに加えるんでしょう・・
ちょっと、うっかりしてました^^;
セレクトボックスでリンクする(選択のみ)の例では、
終わりから数えて、二つ目の「}」と三つ目の「}」の間に入れて下さい。

> あと、追加の質問になるんですが
最近の私の回答に似たようなものが…
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=93

頑張って手を加えてみて下さい(^0^)/~~

4   名前: 008 : 2005/07/27 00:28  [URL
フォーカスなんですが、アップロードしていませんが機能していないようです。

else if(target != ""){

eval('parent.' + target + '.location.href = url');
}
else{
location.href = url;
}
document.form1.select.blur();
}

}

// -->
</SCRIPT>

という風にご指導いただいたとおりしたつもりなんですが。
相変わらずリンク移動後もメニューが青色でフォーカスされていて
ボールを回すとカチカチとリンクが変わってしまいます。

私の説明が下手だったのかもしれませんがトップページのニュース速報を
クリックすると現れる、FC2ニュースのような仕組みにしたいんです。
わがまま言ってすみません。

あと、プルダウン選択ボタンの方のリンク方法ですが参照先をみさせてい
ただいたのですが、JavaScriptはタグの意味自体が分からなくてちょっと
私には理解できませんでした。

if(obj.options[obj.selectedIndex].value){

とか見ると「ああーーーーー!!」となっちゃいます。
JavaScriptをTAG indexさんのようにわかりやすく解説しているサイトとか
無いでしょうか?とりあえずそこで基本を知らないとご指導いただいても
理解できないような気になってきました。

元帥さんにはいつも本当に感謝しています。フォーカスの件だけでも
構いませんのでどうぞ引き続きご指導ください。よろしくお願いいたします。

5   名前: 008 : 2005/07/27 00:28  [URL
すみません。更に追加してお聞きしたいのですが、
上に書いた上と同様のプルダウンを同一ページに2つ以上設置するのですが
ターゲットが個別に設定できません。過去ログでの

http://www.tagindex.com/kakolog/q1bbs/1001/1247.html

の方のようにjump1()form1.select1.は名前を変えているので動作はするのですが

var target = "c";

の部分で設定した片方の設定でリンクが開いてしまいます。ターゲット先をウィンドウ名
にして、プルダウンごとに違うインラインフレーム内にページを表示したいんです。

JavaScriptについていろいろ検索してみたのですが、サンプルはいろいろ見つかるのですが
それについての解説などがされているものが見つからず仕組みを理解するのに苦しんでいます。

どうぞよろしくお願いいたします。

6   名前: 元帥 : 2005/07/27 00:28  [URL
<script type="text/javascript">
<!--
function jump(obj){
if(obj.options[obj.selectedIndex].value){
window.open(obj.options[obj.selectedIndex].value,obj.form.target);
obj.options[0].selected="selected";
}
}
//-->
</script>



<form target="main">
<select name="select1">
<option value="">選択してください
<option value="1.html">1ページ目
<option value="2.html">2ページ目
<option value="3.html">3ページ目
</select>
<input type="button" value="選択" onclick="jump(this.form.select1)">


<select name="select2">
<option value="">選択してください
<option value="10.html">10ページ目
<option value="11.html">11ページ目
<option value="12.html">12ページ目
</select>
<input type="button" value="選択" onclick="jump(this.form.select2)">
</form>


<form target="_blank">
<select name="select3">
<option value="">検索エンジン
<option value="http://www.google.co.jp/">Google
<option value="http://ask.jp/">Ask.jp
<option value="http://www.marsflag.com/">MARS FLAG
</select>
<input type="button" value="選択" onclick="jump(this.form.select3)">
</form>

7   名前: 元帥 : 2005/07/27 00:28  [URL
>>4
え〜と、失礼しました^^;
IEのバグなのか、仕様なのか…

苦肉の策として、そのコードの代わりに
window.focus();
を挿入(但し、同時にウィンドウを新たに開くと不便ですが)

或いは適当なフォームにフォーカスを当てる。
<input type="button" id="tatoeba">
を用意して(元々使用されているボタンでも良い)
そのコードの部分に
document.getElementById('tatoeba').focus();


JavaScriptの解説サイトですか…
え〜と、私も詳しくはないですが、確かにTips集だけは多いですね。
(ここもそうですしね)
JavaScript 入門
といったキーワードでググればすぐに見つかるのでは、と思うのですが…


8   名前: 008 : 2005/07/27 00:28  [URL
元帥さん!本当にいつもありがとうございます!

試してみました。タグのとおりトップページのプルダウンを変更して見ると
うまくいきました。しかし選択式のプルダウンも設置したいので
知識はないので感をたよりにいろいろ試してみて

<form target="c">
<select name="select3" onChange="jump(this.form.select3)">
<OPTION VALUE="">
<OPTION VALUE="">
</SELECT>
</FORM>

とすることで選択式に変更できました。やり方があっているのかは全く
分かりませんが・・・ しかしこれだとまだフォーカスの件が残っており
これも元帥さんのご指導どおり

<script type="text/javascript">
<!--
function jump(obj){
if(obj.options[obj.selectedIndex].value){
window.open(obj.options[obj.selectedIndex].value,obj.form.target);
obj.options[0].selected="selected";
}
window.focus();
}
//-->
</script>

としてみたら見事に希望通りのプルダウンになりました。
しかし、元帥さんも危惧しているとおり別窓で開くプルダウンリンクの
場合は新窓が後ろに隠れてしまいます。ボタンにフォーカスも試してみた
のですが効果は一緒でした。

複数のプルダウンのうち一つだけフォーカスを設定しないようにしたり
一つ一つ別々に設定できる方法などがあれば教えていただきたいです。

JavaScriptの解説サイトなんですが、TAG indexさんのようにしたいこと別に
選べてそれについて詳しく説明しているサイトがあればなあと思っています。
それとMARS FLAG、いいですね!理想系の検索サイトのような気がします!
早速おきにいりに入れちゃいました。

本当に元帥さんにはいつもお世話になっています。
引き続きどうぞよろしくお願いいたします。

9   名前: 元帥 : 2005/07/27 00:28  [URL
> やり方があっているのかは全く分かりませんが・・・
合っていますよo(^-^)o
が、水を差すようで悪いのですが、100人のプログラマーがいれば100通りのソースができあがるのがこの世界です。
私なら、という事で付記しておきます。
<select onChange="jump(this)">

> ボタンにフォーカスも試してみたのですが効果は一緒でした。
これはまたとんだ失礼を(汗
一応、blur()も機能しているのですが、私のIE6は
・既にある窓に対してURLを開く時
・プルダウンを引き出して、何もせず閉じた時
機能しなくなるようです。

> 複数のプルダウンのうち一つだけフォーカスを設定しないようにしたり
> 一つ一つ別々に設定できる方法などがあれば教えていただきたいです。
結局の所、新規ウィンドウ(_blank)でない時は
セレクトボックスからフォーカスを外す為にウィンドウにフォーカスする
という事でよろしいでしょうか。

if(obj.form.target != '_blank')window.focus();
これを代わりに挿入すれば多分大丈夫な筈。

JavaScript解説サイトですが
http://search.yahoo.co.jp/bin/search?p=JavaScript&fr=top&src=top&search.x=0&search.y=0
Yahooオススメアイコン(?)がついているサイト等はいかがでしょうか。
一応、基礎文法の解説もあったので。


10   名前: 008 : 2005/07/27 00:28  [URL
元帥さん!ありがとうございます!

バッチグーです!希望通りのJavaScriptです!
本当に本当に感謝しています!JavaScriptの解説サイトのご紹介も
ありがとうございます。yahoo!がありましたね。いつもgoogleでしか
検索しないものでyahoo!のことをぜんぜん忘れていました。
こういうときにディレクトリリンク集が役に立つんですね。
参考になるサイトをこれから探してみたいと思います。

JavaScriptはHPを便利にするのにとても役に立つものだと思いますので
ものに出来るようにがんばってみます。しかしまた質問しにはやってくる
ことと思いますので、その時にはまたどうぞよろしくお願いいたします。

ありがとうございました!

一覧へ戻る