よろしくお願いします。

いくつかの入力フォームがある画面で、
一つ目のフォームにデフォルトで入力用カーソルがきているように
するにはどのように指定したらよいですか?

A 回答 (2件)

こんな感じでしょうか?


最低限のタグおよび属性しか書いていないので、
必要な部分は追加して下さいね。

<html><head></head>
<body onLoad="document.frm.txt1.focus();">

<form name="frm">
<input type="text" name="txt1">
<input type="text" name="txt2">
<input type="submit" value="送信">
<input type="reset" value="リセット">
</form>

</body>
</html>

参考まで
    • good
    • 0
この回答へのお礼

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

<body onLoad="document.frm.txt1.focus();">
の部分と、
<form name="frm">
のようにフォームに名前をつけることを追加しただけで成功しました。
とても助かりました!

お礼日時:2001/03/12 18:22

Gooのトップページが正にそうなってますね。


ヘッダにて
function searchFocus() { document.query.MT.focus(); }
と定義しておいて
<body onload="searchFocus();">
で呼び出してます。

document.query.MT.focus();の「query.MT」の部分はページの内容に応じて変更する必要があるでしょう。

参考URL:http://www.goo.ne.jp/
    • good
    • 0
この回答へのお礼

ありがとうございました。
わたしもgooをみて「できるんだ」って思って、ソース見ようとしたら
ソースがでかすぎて開けず、質問しました。

今回はより改造度がひくいもう一つの回答のほうを使うことにしましたが、
happy_peopleさんの組まれたような方法も身につけなきゃなとおもうこのごろです。構造型プログラムしか組んだことがないので、なるべく一つ一つの
処理を部品にしていく癖をつけたいです。

お礼日時:2001/03/12 18:25

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q入力フォームのカーソル移動の設計の仕方

Webページに多くの入力フォームを使い、EXCELの縦横10行×5列の表のような入力をさせたいのですが、Webの場合、通常、入力フォームの移動は「Tab」キーになってしまい、Excelの「Enter」とは異なります。

左手は伝票の束を持って、ページをめくる感じになり、とても「Tab」キーを押す余裕がありません。キーボードの配置を変えるツールを使って、「+」キーを「Tab」キーにするなどの工夫が考えられますが、Webアプリを設計する上で、入力のしやすい画面(入力インターフェイス)は、どのような工夫・設計・仕様にすれば、使いやすいWebアプリになるのでしょうか?

ここでは、プログラム言語、サーバ言語など任意(何でもOK)としてください。
ただ、IEかネットスケープを使ったWebアプリを考えています。
よろしくお願い致します。

Aベストアンサー

多分こんなのが欲しいのでしょう。

差分
操作キーの追加
マウスでのクリック後の誤動作の修正
入力許可
その他表示項目

操作方法
* ↑
+ ↓
- →
/ ←

SAMPLE/

<html>
<head>
<script language="JavaScript">
<!--

//ここでは文字表示用の省略用です。
var TITLE=new Array();
TITLE[0]='SAMPLE (c)Shorn Fonda';
TITLE[1]='';
TITLE[2]='<center>A</center>';
TITLE[3]='<center>B</center>';
TITLE[4]='<center>C</center>';
TITLE[5]='<center>D</center>';
TITLE[6]='<center>E</center>';
TITLE[7]='<center>0</center>';
TITLE[8]='<center>1</center>';
TITLE[9]='<center>2</center>';
TITLE[10]='<center>3</center>';
TITLE[11]='<center>4</center>';
TITLE[12]='<center>5</center>';
TITLE[13]='<center>6</center>';
TITLE[14]='<center>7</center>';
TITLE[15]='<center>8</center>';
TITLE[16]='<center>9</center>';

//ここではもしCGI等に送る時にINPUT name="****"にするための省略用です。
//ここで入力するとかってにname="入力した値"としてセットされます。
var NAME = new Array();
NAME[0] = ''; NAME[1] = ''; NAME[2] = ''; NAME[3] = ''; NAME[4] = '';
NAME[5] = ''; NAME[6] = ''; NAME[7] = ''; NAME[8] = ''; NAME[9] = '';
NAME[10] = ''; NAME[11] = ''; NAME[12] = ''; NAME[13] = ''; NAME[14] = '';
NAME[15] = ''; NAME[16] = ''; NAME[17] = ''; NAME[18] = ''; NAME[19] = '';
NAME[20] = ''; NAME[21] = ''; NAME[22] = ''; NAME[23] = ''; NAME[24] = '';
NAME[25] = ''; NAME[26] = ''; NAME[27] = ''; NAME[28] = ''; NAME[29] = '';
NAME[30] = ''; NAME[31] = ''; NAME[32] = ''; NAME[33] = ''; NAME[34] = '';
NAME[35] = ''; NAME[36] = ''; NAME[37] = ''; NAME[38] = ''; NAME[39] = '';
NAME[40] = ''; NAME[41] = ''; NAME[42] = ''; NAME[43] = ''; NAME[44] = '';
NAME[45] = ''; NAME[46] = ''; NAME[47] = ''; NAME[48] = ''; NAME[49] = '';

//次処理用メソッド
function EndManagement(){
confirm('この後次処理に送ると便利です');
if ( TorF == true ){
}
else{
}
}

window.onload = FSTPositionSet;
document.onkeypress = MovePosition;

var PosX=0;
var PosY=0;
var LineMaxX=5-1;
var LineMaxY=10-1;

var KEYCODE = new Array();
KEYCODE[0]= 43;// +
KEYCODE[1]= 45;// -
KEYCODE[2]= 42;// *
KEYCODE[3]= 47;// /

var MoveX = new Array();
var MoveY = new Array();
MoveX[0]=0;
MoveY[0]=1;
MoveX[1]=1;
MoveY[1]=0;
MoveX[2]=0;
MoveY[2]=-1;
MoveX[3]=-1;
MoveY[3]=0;

function ClickPosition(doc){
Num=0;
for(i=0;i<document.forms[0].length;i++){
if(doc==document.forms[0].elements[i]){
Num=i;
}
}
PosX=Num%5;
PosY=(Num-PosX)/5;
}
function FSTPositionSet(){
document.title=TITLE[0];
for(i=0;i<document.forms[0].elements.length;i++){
document.forms[0].elements[i].name=NAME[i];
}
PosX=0;
PosY=0;
document.forms[0].elements[0].focus();
}
function MovePosition(){
switch(event.keyCode){
case KEYCODE[0]:
if(PosY!=LineMaxY){
PosX=PosX+MoveX[0];
PosY=PosY+MoveY[0];
}else if(PosX!=LineMaxX){
PosX++;
PosY=0;
}else{
event.keyCode=null;
EndManagement();
}
break;
case KEYCODE[1]:
if(PosX!=LineMaxX){
PosX=PosX+MoveX[1];
PosY=PosY+MoveY[1];
}else if(PosY!=LineMaxY){
PosX=0;
PosY++;
}else{
event.keyCode=null;
EndManagement();
}
break;
case KEYCODE[2]:
if(PosY!=0){
PosX=PosX+MoveX[2];
PosY=PosY+MoveY[2];
}else if(PosX!=0){
PosX--;
PosY=0;
}
break;
case KEYCODE[3]:
if(PosX!=0){
PosX=PosX+MoveX[3];
PosY=PosY+MoveY[3];
}else if(PosY!=0){
PosX=0;
PosY--;
}
break;
}
i=PosY*5+PosX;
switch(event.keyCode){
case KEYCODE[0]:
case KEYCODE[1]:
case KEYCODE[2]:
case KEYCODE[3]:
event.keyCode=null;
break;
}
document.forms[0].elements[i].focus();
}
function inTitle(i){
document.write(TITLE[i]);
}
//-->
</script>
</head>
<body>
<form name="main">
<br>
<script language="JavaScript">
<!--
inTitle('0');
//-->
</script>
<br>
<table><tr>
<td class="000"width="120">
<script language="JavaScript">
<!--
inTitle('1');
//-->
</script>
</td>
<td class="00"width="120">
<script language="JavaScript">
<!--
inTitle('2');
//-->
</script>
</td>
<td class="00"width="120">
<script language="JavaScript">
<!--
inTitle('3');
//-->
</script>
</td>
<td class="00"width="120">
<script language="JavaScript">
<!--
inTitle('4');
//-->
</script>
</td>
<td class="00"width="120">
<script language="JavaScript">
<!--
inTitle('5');
//-->
</script>
</td>
<td class="00"width="120">
<script language="JavaScript">
<!--
inTitle('6');
//-->
</script>
</td>
</tr><tr>
<td class="00">
<script language="JavaScript">
<!--
inTitle('7');
//-->
</script>
</td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
</tr><tr>
<td class="00">
<script language="JavaScript">
<!--
inTitle('8');
//-->
</script>
</td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
</tr><tr>
<td class="00">
<script language="JavaScript">
<!--
inTitle('9');
//-->
</script>
</td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
</tr><tr>
<td class="00">
<script language="JavaScript">
<!--
inTitle('10');
//-->
</script>
</td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
</tr><tr>
<td class="00">
<script language="JavaScript">
<!--
inTitle('11');
//-->
</script>
</td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
</tr><tr>
<td class="00">
<script language="JavaScript">
<!--
inTitle('12');
//-->
</script>
</td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
</tr><tr>
<td class="00">
<script language="JavaScript">
<!--
inTitle('13');
//-->
</script>
</td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
</tr><tr>
<td class="00">
<script language="JavaScript">
<!--
inTitle('14');
//-->
</script>
</td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
</tr><tr>
<td class="00">
<script language="JavaScript">
<!--
inTitle('15');
//-->
</script>
</td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
</tr><tr>
<td class="00">
<script language="JavaScript">
<!--
inTitle('16');
//-->
</script>
</td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
<td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td>
</tr></table>
</form>
</body>
</html>

多分こんなのが欲しいのでしょう。

差分
操作キーの追加
マウスでのクリック後の誤動作の修正
入力許可
その他表示項目

操作方法
* ↑
+ ↓
- →
/ ←

SAMPLE/

<html>
<head>
<script language="JavaScript">
<!--

//ここでは文字表示用の省略用です。
var TITLE=new Array();
TITLE[0]='SAMPLE (c)Shorn Fonda';
TITLE[1]='';
TITLE[2]='<center>A</center>';
TITLE[3]='<center>B</center>';
TITLE[4]='<center>C</center>';
TITLE[5]='<center>D</ce...続きを読む

Qフォーム入力画面で・・・・

こんにちは。いつもお世話になっております。

今応募フォームを作っています。
テキストフィールドで、数字を入力してもらう
箇所があるのですが、この数字を、デフォルトでは
左つめで表示されるようになっているみたいなのですが
これを、右つめで入力されている数字を
表示させる事は可能でしょうか・・・?

どうかご指導よろしくお願いいたします。

Aベストアンサー

埋め込むinputタグに
style="text-align:right;"
この1文を追加すれば右詰め表示になると思います。

Qテキストエリアでのデフォルトカーソル合わせ

gooや、yahooのトップを開くと、自動的に
検索窓にカーソルが持っていかれます。

2階層以降のページで、テキストエリア(ページ中央くらいにある)に
デフォルトでカーソルを持ってきたいのですが
そのような記述はあるのでしょうか?

どなたかご存知の方いたらご教授ください。
よろしくお願いします!

Aベストアンサー

JavaScriptの「focus()」を使うのが簡単だと思います

Q入力フォーム画面がたくさんある場合

ページごとにそれぞれのフォームのスタイルを定義したほうが良いでしょうか?
例えばログインフォームなどは項目が少ないので
dl.login{}
項目が多く複雑なフォームは
table.aaa{}
table.bbb{}
どのようなマークアップが好ましいのでしょうか?

Aベストアンサー

フォームのみならず、CSS全般で言えることですが、サイトを通して共通するスタイルはタグに直接指定する。いくつかパターンに分けられそうな場合は、classに指定する。その要素固有のスタイルの場合は、idで指定する。JavaScriptが絡んでくると、必ずしもそれが理想ではない場合もありますが、基本はそんなところだと思いますよ。
CSSの設計に慣れないと難しいのは、現状のスタイルではなく、今後どのように変化するかも予測して、あるいは、どのように変化しても対応できるカスケードをプランニングする必要があるところだと思います。

Q入力フォームの初期入力モード設定

Internet Explorerでは、スタイルシートでime-modeプロパティを記述すると
日本語入力モードや英数字入力モードなど初期設定出来る事は知っているのですが

javascriptなどを利用したら
「カナ入力モード」や「数値入力モード」など設定することは可能なのでしょうか?
また、他ブラウザ(safariやfirefox)など設定出来るのでしょうか?

Aベストアンサー

IEなどの独自仕様ですべてのブラウザに有効ではありませんが・

input[type=text],input[type=textarea]{ime-mode:active;}

とか、属性値として、他にauto,inactive,disabledがあります。

javascriptを利用した方法は
jQueryを使ったJavaScriptの書き方と、日本語入力モード制御の例 | JavaScript | murak.net ( http://murak.net/post/javascript/246 )
を参考に。


人気Q&Aランキング

おすすめ情報