4. HTML - JavaScript jQuery - 入力欄にフォーカス&選択

 
4.1 概要
4.2 入力欄に値をいれて選択状態に

4.1 概要

 前ページの話の続きになりますが。  1ページにあたりフォーカスをあてることのできる項目は1つしかないのだから、ページを分けて書くしかないのです。  前ページでは、フォーカスをあてた個所に入力値はありませんでしたが。  入力値がある場合、カーソルが左に行っちゃうんだな。  カーソルを右に移動したかったのですが、うまくいかなかったので、選択状態にする方法です。  この項は「jQuery テキストボックスのフォーカス時にテキストを全選択」を参考にさせていただきました。

4.2 入力欄に値をいれて選択状態に

 そもそもは、入力欄にあらかじめ値をいれて、フォーカスさせたうえで、カーソルを右に寄せたかったのですが・・・。  フォーカスを与えて値をいれればいけるように書いてあるサイトもあったのですが、これはうまくいきませんでした。

<input type="text" id="first" name="q" value="" />  
<script type="text/javascript">
var item = document.getElementById('first');
item.focus();
item.value = item.value;
</script>
<input type="submit" class="page" value="検  索" />
 次善の策として、選択状態にすることにしました。

<input type="text" id="first" name="q" value="100" />  
<script type="text/javascript">
document.getElementById('first').select();
</script>
<input type="submit" class="page" value="検  索" />
 こんな感じ。