WEB相談室

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

タイトル:テキストの選択状態

0:[投稿] ぱんだ [2002/08/01 15:17 ][環境:WIN+IE WIN系+Java]

お世話になっています。
ぱんだです。

qa2972に関連して質問なのですが
表示のためだけに使用しているテキストフィールドにフォーカスを当てたくないために
以下のようなスクリプトを実行してみました。
フォーカスの移動はtabキーで行うという前提でお願いします。

<script language="JavaScript">
<!--
 function moveNext(next_obj){
   var nextTarget = eval("document.form." + next_obj);
   nextTarget.focus();
 }
-->
</script>
<input type="text" name="txt1" value="テキスト1"><!--入力できる-->
<input type="text" name="txt2" value="テキスト2" onFocus="moveNext(txt3);"><!--入力できない-->
<input type="text" name="txt3" value="テキスト3"><!--入力できる-->
<input type="text" name="txt4" value="テキスト4" onFocus="moveNext(btn);"><!--入力できない-->

<input type="button" name="btn" value="button">

このようにすると、txt2にtabキーでフォーカスを当てるとtxt3には問題なくフォーカスが移動するのですが、
txt4にtabキーでフォーカスがあたると、txt4のvalue値が選択された状態になり、
フォーカス自体はbtnに移動してしまいます。
txt4は選択状態なのですが、値の編集等はできません。

「txt4が選択されていない状態で、btnにフォーカスを移動する」
ということは不可能なのでしょうか??
HTMLかJavaScriptのバグではないかとも思うんですが。。。

皆様の知恵をお貸しください。


1:[回答] 謎の素浪人 [2002/08/01 16:27 ]

こんな感じでどうでしょう?

<script type="text/javascript">
<!--
function moveNext(next_obj, elm){
  var nextTarget = document.forms[0].elements[next_obj];
  nextTarget.focus();
  if (document.all) elm.createTextRange().execCommand('Unselect');
}
//-->
</script>
<form action="">
 <input type="text" name="txt1" value="テキスト1"><!--入力できる-->
 <input type="text" name="txt2" value="テキスト2" onfocus="moveNext('txt3', this);" readonly><!--入力できない-->
 <input type="text" name="txt3" value="テキスト3"><!--入力できる-->
 <input type="text" name="txt4" value="テキスト4" onfocus="moveNext('btn', this);" readonly><!--入力できない-->
 <input type="button" name="btn" value="button">
</form>

入力できないフォームには、
readonly属性を付けておいた方が良いかもしれません。

それと疑問に思ったのですが、
このままだと [Shift]+[Tab] で戻れないのですが困りませんか?


2:[完了] ぱんだ [2002/08/01 17:24 ]

ぱんだです。

謎の素浪人さん、ご回答ありがとうございました。
初めて見るメソッドが2つもありました。
早速勉強したいと思います。

そうですね。[Shift]+[Tab]で戻れないですね。
一応仕様確認ということになりました。
お客さんの要望によりけりですね^^;

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World