HTML・JSPでHPを作っているのですが4つのテキストボックスがあるとします。そこには1文字しか入力できないようになっていて1文字入力すると自動的につぎのテキストボックスにカーソルを移動させたいのですがどうしたらいいのでしょう?

イメージ的にはTABキーを押した感じなのですがそのTABを押さなくても入力した瞬間に次のテキストボックスに入力できるようにしたいのです。

よろしくお願いします。

A 回答 (2件)

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



<html>
<head>
<title>入力時フォーカス移動</title>
<script language="JavaScript">
<!--
function moveFocus(name,to){
if(document.all[name].value.length == 1){
document.all["Txt_Input"+to].focus();
}
}
// -->
</script>
</head>
<body>
<form name="form1">
<input type="text" name="Txt_Input1" maxlength="1" onKeyUp="moveFocus(this.name,'2')">
<input type="text" name="Txt_Input2" maxlength="1" onKeyUp="moveFocus(this.name,'3')">
<input type="text" name="Txt_Input3" maxlength="1" onKeyUp="moveFocus(this.name,'4')">
<input type="text" name="Txt_Input4" maxlength="1">
</form>
</body>
</html>
    • good
    • 0
この回答へのお礼

ありがとうございます。
出来ました!!

お礼日時:2003/09/29 13:27

フォームのフォーカスを指定するのは下のソースで行けるはずですので、お試しください。

あとは入力した事を判定する処理を入れれば可能だと思います。

-----------------------------------------------
<HTML>
<HEAD>
<TITLE>Focus_Sample</TITLE>
</HEAD>
<BODY>
<DIV ALIGN="center">
<H3>A2の入力フォームにカーソルを合わせます。</H1>
</DIV>
<P>
<FORM NAME="myFORM">
<INPUT TYPE="text" NAME="A1">
<INPUT TYPE="text" NAME="A2">
<INPUT TYPE="text" NAME="A3">
</FORM>
<SCRIPT Language="JavaScript">
<!--
document.myFORM.A2.focus();
// -->
</SCRIPT>
</BODY></HTML>

この回答への補足

ありがとうございます。
教えていただいたようにやってみたのですがうまく動きませんでした。
判断文がおかしいのでしょうか?
判断文は下記のようにないたのですが・・・

<SCRIPT Language="JavaScript">
<!--
document.test.data1.focus();
if(data1!=NULL){
document.test.data2.focus();
}
if(data2!=NULL){
document.test.data3.focus();
}
if(data3!=NULL){
document.test.data4.focus();
}
-->
</SCRIPT>

補足日時:2003/09/29 10:35
    • good
    • 0

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

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

QJavaScript:現在フォーカスの次にフォーカスを移動したい

JavaScriptで現在フォーカスが設定されている次のオブジェクトに
フォーカスを移動させるということは出来ますか??

つまり、オブジェクト名を記載せずに、ただ単に"次にフォーカス"的な
方法があると大変に助かるのですが。。

もしご存知の方がいらしたら、是非、教えて下さい。
アドバイスをお待ちしています。

どうぞ宜しくお願い致します。

Aベストアンサー

<html>
<body>
<script language="javascript">
<!--
function next_focus(next){
document.form.comment+next.focus();
return false;
}
// -->
</script>
<center>
<form name="form" method="post">
<textarea name="comment1" rows=5 cols=25 wrap="soft"></textarea>
<input type="submit" size=8 value="次へ" onClick="return next_focus(comment2)"><br>
<textarea NAME="comment2" ROWS=5 COLS=25 WRAP="soft"></textarea>
<input type="submit" size=8 value="次へ" onClick="return next_focus(comment1)"><br>
</form>
</center>
</body>
</html>
--------------------------------------------------
質問の意味がすこしわかりずらかったのですが、特にどのタイミングでフォーカスを移動させたいのかがよくわかりませんでした。
一応、フォーカスが移動するサンプルつくってみましたので試してみてください。

<html>
<body>
<script language="javascript">
<!--
function next_focus(next){
document.form.comment+next.focus();
return false;
}
// -->
</script>
<center>
<form name="form" method="post">
<textarea name="comment1" rows=5 cols=25 wrap="soft"></textarea>
<input type="submit" size=8 value="次へ" onClick="return next_focus(comment2)"><br>
<textarea NAME="comment2" ROWS=5 COLS=25 WRAP="soft"></textarea>
<input type="submit" size=8 value="次へ" onClick="return ne...続きを読む

Qテキストボックス入力を半角英数字に制限する

よろしくお願いします。

テキストボックスに入力される文字を、
半角英数字(英語の場合は大文字のみ)以外入力できないように制限したいのですが可能でしょうか?

もしくは半角英数字以外が入力された場合アラートを出すようにしたいのですが。。。

また、文字数の制限も可能でしょうか?

第一希望)
12文字以内の半角英数大文字以外入力できないように入力制限する。

第二希望)
12文字以内の半角英数大文字以外入力の文字が入力されている状況でボタン(=CGI実行)を押すと警告のアラートが出る。

第三希望)
半角英数大文字以外入力できないように制限、もしくはアラート表示。

例)
AAAA-1234567 ○(ハイフンを含め12文字以内の半角英数字)
AAAA-123456789 ×(12文字以内でない)
aaaa-1234567 ×(小文字が含まれている)


webサーバー・・・HP-UX
web・・・IE6
開発端末・・・windows2000(Tera Term 使用)

情報をお持ちの方いらっしゃいましたら、
よろしくお願いいたします。

よろしくお願いします。

テキストボックスに入力される文字を、
半角英数字(英語の場合は大文字のみ)以外入力できないように制限したいのですが可能でしょうか?

もしくは半角英数字以外が入力された場合アラートを出すようにしたいのですが。。。

また、文字数の制限も可能でしょうか?

第一希望)
12文字以内の半角英数大文字以外入力できないように入力制限する。

第二希望)
12文字以内の半角英数大文字以外入力の文字が入力されている状況でボタン(=CGI実行)を押すと警告のアラートが...続きを読む

Aベストアンサー

第二希望の条件について。
前提としてチェックするテキストボックスのnameがtxtであった場合の説明をします。
まず、次のようにform開始タグにname="fm"とonsubmit="return checkForm()"を追加します。

<form name="fm" action="********.cgi" method="post" onsubmit="return checkForm()">


次に以下を<head>~</head>に貼り付けることで、JavaScriptによる送信前のチェックが可能です。

---------------------------------------
<script type="text/javascript">
<!--
function checkForm(){
var str = document.fm.txt.value;
if (str.match(/[^A-Z\d\-]/)) {
alert("半角英数字(大文字)しか入力できません");
return false;
}
else if (str.length > 12) {
alert("12文字以内で入力してください");
return false;
}
}
//-->
</script>
---------------------------------------

「ハイフンを含め」と書いているので、ハイフンを入れても有効なようにしました。
また、12文字以内としか書かれていないので0文字でも警告が出ないようになっています。
もし、何も入力されていない場合でも警告を出すならば、次のようにしてください。

---------------------------------------
if (!str) {
alert("何も入力されていません");
return false;
}
else if (str.match(/[^A-Z\d\-]/)) {
alert("半角英数字(大文字)しか入力できません");
return false;
}
else if (str.length > 12) {
alert("12文字以内で入力してください");
return false;
}
---------------------------------------

第二希望の条件について。
前提としてチェックするテキストボックスのnameがtxtであった場合の説明をします。
まず、次のようにform開始タグにname="fm"とonsubmit="return checkForm()"を追加します。

<form name="fm" action="********.cgi" method="post" onsubmit="return checkForm()">


次に以下を<head>~</head>に貼り付けることで、JavaScriptによる送信前のチェックが可能です。

---------------------------------------
<script type="text/javascript">
<!--
function checkForm(){
...続きを読む

QJavaScriptでこれ出来ますか?

すでに文字列が入っているテキストボックスにfocus()を行い、
"I"の形の文字キャレットを文字列の最後に移動させたいのですが、

ただ単に
document.getElementById("TextField").focus()
などとすると、文字列の最初に文字キャレットがいってしまいます。

どのようにしたら文字列の最後に文字キャレットを移動させられ
ますでしょうか?

Aベストアンサー

focusしてから書き換えてみては?

<script language="javascript">
function test(){
var tf=document.getElementById('TextField');
tf.focus();
tf.value=tf.value;
}
</script>
<input type="text" id="TextField" value="hogehoge">

<input type="button" value="test" onClick="test()">

Qテキストボックスのフォーカス移動

こんにちは。

htmlページで<input type="text"/>に既定の桁数を入力したら次のinputにフォーカスを
移動させたいと考えています。

下の例の場合、1番目のテキストボックスに既定の桁数5ケタを入力したら、フォーカス
を2番目のテキストボックスに移動させ、2番目のテキストボックスに4ケタ入力したら
3番目のテキストボックスにフォーカスを移動させるようにしたいと思っています。

スクリプトの再利用ができるよう、たとえば同じname属性を与えればその範囲内で
簡単にフォーカスを移動させられるようなものにしたいと思うのですが、うまくいきません。

何か良い書き方はありませんでしょうか?


<div>
 <input type="text" name="hoge" maxlength="5" onkeyup="test(this)"/>
 <input type="text" name="hoge" maxlength="4" onkeyup="test(this)"/>
 <input type="text" name="hoge" maxlength="5" onkeyup="test(this)"/>
 <input type="text" name="hoge" maxlength="2" onkeyup="test(this)"/>
</div>
 ・
 ・
<script type="text/javascript">

function test(elm) {
 if (elm.value.length >= elm.maxLength) {

  /*(気持ちとしては、ここにこのような感じのことを書きたいのですが・・・)
    var arr_elm = document.getElementsByName(elm.name);
    var n = elm.index + 1
    arr_elm[n].focus();
  */ 
 }
}
</script>

こんにちは。

htmlページで<input type="text"/>に既定の桁数を入力したら次のinputにフォーカスを
移動させたいと考えています。

下の例の場合、1番目のテキストボックスに既定の桁数5ケタを入力したら、フォーカス
を2番目のテキストボックスに移動させ、2番目のテキストボックスに4ケタ入力したら
3番目のテキストボックスにフォーカスを移動させるようにしたいと思っています。

スクリプトの再利用ができるよう、たとえば同じname属性を与えればその範囲内で
簡単にフォーカスを移動させられるようなも...続きを読む

Aベストアンサー

最後までいったらどうするのでしょう?

<script>
function test(elm) {
var n=elm.form.elements[elm.name];
if (elm.value.length >= elm.maxLength) {
for(var i=0;i<n.length;i++){
if(n[i]==elm){
if(n[i+1]) n[i+1].focus();
}
}
}
}
</script>

<form>
<div>
<input type="text" name="hoge" maxlength="5" onkeyup="test(this)"/>
<input type="text" name="fuga" maxlength="4" onkeyup="test(this)"/>
<input type="text" name="hoge" maxlength="4" onkeyup="test(this)"/>
<input type="text" name="hoge" maxlength="5" onkeyup="test(this)"/>
<input type="text" name="hoge" maxlength="2" onkeyup="test(this)"/>
<input type="text" name="fuga" maxlength="3" onkeyup="test(this)"/>
</div>
</form>

最後までいったらどうするのでしょう?

<script>
function test(elm) {
var n=elm.form.elements[elm.name];
if (elm.value.length >= elm.maxLength) {
for(var i=0;i<n.length;i++){
if(n[i]==elm){
if(n[i+1]) n[i+1].focus();
}
}
}
}
</script>

<form>
<div>
<input type="text" name="hoge" maxlength="5" onkeyup="test(this)"/>
<input type="text" name="fuga" maxlength="4" onkeyup="test(this)"/>
<input type="text" name="hoge" maxlength="4" onkeyup="test(this)"/>
<input...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QJavaScript でキーを送る

JavaScript でキーを送る
のはどうしたらいいのでしょうか。
キーボードからではなく、自動的に任意のキーを押させたいのです。


// aキーのkeydownイベントを起こす
var _e = document.createEvent("KeyboardEvent");

_e.initKeyEvent("keydown", true, true, null, false, false, false, false, 65, 0);
document.getElementById("dummy").dispatchEvent(_e);

いろいろ検索して上記のも試しましたが、IE8では動作が確認できませんでした。
IEじゃ無理なんでしょうか。

Aベストアンサー

よくわかんないけど…

どうせIEは独自仕様だろうと、少し調べてみました。
どうやらこれらしい。(↓)
http://msdn.microsoft.com/ja-jp/library/ms536423(en-us,VS.85).aspx

手元にIE6しかないので、IE6でのみ確認。
<html>
<head><title>test</title>
<script type="text/javascript">
function test(evt) {
var e = evt.srcElement;
alert(e.tagName + ' / ' + evt.keyCode);
}

function fire() {
var obj = document.createEventObject();
obj.keyCode = 65;
document.body.fireEvent("onkeydown", obj);
}
</script>
</head>
<body onkeydown="test(event)">
<input type="button" value="発生" onclick="fire()">
</body>
</html>

>キーボードからではなく、自動的に任意のキーを押させたいのです。
でもkeydownそのものをシュミレートしなくてもよさそうな気もしますが…?(その結果のほうを実行/操作すればよさそう)

よくわかんないけど…

どうせIEは独自仕様だろうと、少し調べてみました。
どうやらこれらしい。(↓)
http://msdn.microsoft.com/ja-jp/library/ms536423(en-us,VS.85).aspx

手元にIE6しかないので、IE6でのみ確認。
<html>
<head><title>test</title>
<script type="text/javascript">
function test(evt) {
var e = evt.srcElement;
alert(e.tagName + ' / ' + evt.keyCode);
}

function fire() {
var obj = document.createEventObject();
obj.keyCode = 65;
document.body.fireEvent("on...続きを読む

Qテキストボックスの入力をリセット

ボタンが押されたら、テキストボックスの入力内容を削除するにはどうしたらいいでしょうか?

Aベストアンサー

こんな感じ。

<form>
<input type=button value="clear" onClick="this.form.t.value = ''">
<input type=text size=50 name=t>
</form>

ボタンの this.form.t の t が、テキストの名前になっていて、押されると
空の文字列を入れる、だけです。

もし、フォーム全体のテキストをクリアするならば、こんな方法もあります。

<form>
<input type=button value="clear" onClick="this.form.reset()">
<input type=text size=50 name=t1>
<input type=text size=50 name=t2>
<input type=text size=50 name=t3>
</form>

Qテキストボックスに数字しか入力できないようにするには?

タイトルの通りなのですが、あるテキストボックスに数字しか入力できないようにしたいのですが可能でしょうか?また、

「あいうえお 12345 「」:・、¥・」

というような文字列をコピーし、そのテキストボックスにペーストした際にも数字の12345だけが残るといった事も実現したいのですが…

どなたかご存知の方いらっしゃいましたら教えて頂けると幸いです。

Aベストアンサー

>英数字

では、こんな感じで

<input type="text" onKeyup="this.value=this.value.replace(/[^0-9a-z]+/i,'')">

Qidを使わずにonclickで自身の要素取得

javascriptで
<a href="XXX.XXX" title="ゴール" onclick="element()">test</a>
function() {
idを使わずにここにtitle属性のゴールを習得する方法を記述したいのですが、わかりません
よろしくお願いします
}

Aベストアンサー

こんにちは。


==== HTML
<a href="" title="ゴール" onclick="getTitle(this);return false;">test</a>
<a href="" title="スタート" onclick="getTitle(this);return false;">test2</a>


==== JavaScript
function getTitle ( obj ) {
var title = obj.getAttribute('title');
alert ( title );
}

こういうことでしょうか。
違っていたらすみません。

QJava-jspの画面入力値保持について

画面にテキスト、ラジオボタン、リストボックス とボタンがあります。
ボタンを押すと、JAVAで処理を行い、jspのviewで表示します。

1.テキスト、ラジオボタン、リストボックスなどに値が入力、設定されている状態で
ボタンを押して処理後にテキスト、ラジオボタン、リストボックスの値が
変わらないようにしたいのですが、
その場合、たとえば、入力、設定値をセッションになどに格納しておき
jspの所で、セッションから値を設定すると言うような方法になるのでしょうか?

2.ボタン押して処理後、ラジオボタン、リストボックスの選択値も
  変えないようにしたいのですが、
  これはどのように実現するのが、適切なのでしょうか?


以上、よろしくお願いします。

Aベストアンサー

ボタンというのはフォームのサブミットボタンのことですよ?
つまり、画面遷移が起きることを前提とすると(元の同じ画面に戻るのも含みます)

テキスト、ラジオボタン、リストボックスの状態を「要求パラメータ」として
送信し、それを次画面に反映するというのが最も一般的な方法です。

フレームワーク struts のアクションフォーム&JSPカスタムタグを使うと比較的楽に
そういう画面が作れますが、多くのフレームワークでも大差ありません。
簡単な画面なら素のサーブレート+JSPでも十分作れます。

セッションでもできますが、 セッションはログイン情報などの保持など、
限定された範囲で使うのが普通です。また、結局セッションに最新の
テキスト、ラジオボタン、リストボックスの状態を送るには、「要求パラメータ」
を送信する必要があります。

AJAXを使うという方法もあります。この場合、ボタンは AJAX 処理だけを行い
画面遷移を起こさないので、サーバ側で画面のテキスト、ラジオボタン、
リストボックスの状態をもつ必要はありません。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報