人に聞けない痔の悩み、これでスッキリ >>

こんにちは。

エンターキーで複数のテキストフィールドを移動するというような質問は多く出ていまして、私もそれを参考に画面を作っています。

今回私が悩んでいますのが、エンターキーの押下でTABキーと同じ動きをさせたいのです。
理由はいろいろありまして、そのうちの1つがTABINDEXを有効にしたいという点です。

これはエンターキーとTABに限ったことではなく、例えば「A」の入力で画面には「B」と表示するとか・・・。色々使い方はあると思いますが。

是非とも宜しくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

bodyのonkeyDownイベントで以下の関数(javascript)を呼んでみて下さい。


keycodeを13(Enter)から9(Tab)に変換するものです。
ちなみに以下のFunctionではイベント発生元がボタンかsubmitだった場合コード変換しません。

function ChgKeyCode()
{
if (!(event.srcElement.type == "button" || event.srcElement.type == "submit"))
{
if (event.keyCode == 13)
{
event.keyCode = 9;
}
}
}

>これはエンターキーとTABに限ったことではなく、例えば「A」の入力で画面には「B」と表示するとか・・・。色々使い方はあると思いますが。

同じ様にしてキーコードを変換してやれば可能ですよ。
    • good
    • 0
この回答へのお礼

こんばんは!有難う御座います!!!いけました。
ホント助かりました!!

お礼日時:2003/06/04 02:29

エンターキーでTABのように動かすのはちょっと難しいですね。


イベントハンドラでエンターだけ拾えればよいのですが、
そのようなハンドラは知っている限り(手持ちの書籍を含む)
存在しませんので、onKeyDownで入力された文字の種類を
判定させるくらいしか思いつきません。

しかし、それをクリアしてしまえば後は簡単です。
エンターを拾ったらば次のテキストボックスにフォーカスを
移してしまえばTABと同じになります。

頼りない回答で申し訳ないのですが、少し試してみて下さい。

この回答への補足

なるほど・・・。次のテキストボックスにフォーカスに移すことはできています。
TABINDEXで指定した順番にフォーカスを動かしたいのです。エンターで次のテキストボックスにフォーカスを動かすだけでは足りないんです・・・。
どうしましょ。。。

なんか策はないでしょうか・・・。

補足日時:2003/06/03 17:44
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

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

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

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

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キーイベントを擬似的に発生させることは可能?

JavaScriptのイベント処理で質問なのですが、
keydownなどのキーイベントを、実際にキーを押さずに擬似的に「このキーが押された」というイベントを発生させることは可能でしょうか?
そもそも不可能ではと思っているのですが
もしそういうテクニックがあるのならと思い質問させていただきました。

また、JavaScriptでは無理だがFirefoxのアドオンなら可能といった情報があればぜひ教えていただきたいと思います。

Aベストアンサー

>keydownを使わないとして
いや、言ってない、言ってない(笑)

対応ブラウザとかは検討してないけど、一応規格にはあると思う。
(つーかDOM 3だからIEで出来ない可能性濃厚)

document.createEventのソースコード
https://developer.mozilla.org/en/DOM/document.createEvent

event.initKeyEvent(GeckoはDOM 2時代のものをベースに組んでいるからinitKeyBoardEventを使うらしい)
https://developer.mozilla.org/en/DOM/event.initKeyEvent

element.dispatchEvent
https://developer.mozilla.org/en/DOM/element.dispatchEvent

を組み合わせていけるんじゃないかと。

Qenterキーでのtab移動

質問させて頂きます。

下記の様にenterキーを押してtab移動しようと考えています。

<form name="form">
<input type="text" id="id1" onkeypress="if(code == 13)document.form.item('id2').focus();">
<input type="text" id="id2" onkeypress="if(code == 13)document.form.item('id3').focus();">
<input type="button" id="id3" value="ボタン">
</form>

ここで、textフォームからボタンへ移動する場合、自動的にボタンが押されてしまいます。
(エンターキーでの移動のため)

ボタンが押されないような方法はあるでしょうか。アドバイスお願い致します。

Aベストアンサー

以前なんかで書いたの転載します。(シフトキー対応)

<script>
try{
document.addEventListener('keydown',function(e){keydownfunc(e)},true);
}catch(e){
document.attachEvent('onkeydown',function(e){keydownfunc(e)});
}
function keydownfunc(e){
var t = (e.srcElement || e.target);
if(t.nodeName!="INPUT" && t.nodeName!="SELECT") return false;
if(e.keyCode==13){
f=t.form;
for(var i=0;i<f.length;i++){
if(t==f[i]){
if(e.shiftKey){
var n=(i==0)?f.length-1:i-1;
}else{
var n=(i==f.length-1)?0:i+1;
}
f[n].focus();
break;
}
}
}
}
</script>

<form>
<input type="text">
<input type="text">
<select>
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
<input type="button" value="ボタン">
</form>

以前なんかで書いたの転載します。(シフトキー対応)

<script>
try{
document.addEventListener('keydown',function(e){keydownfunc(e)},true);
}catch(e){
document.attachEvent('onkeydown',function(e){keydownfunc(e)});
}
function keydownfunc(e){
var t = (e.srcElement || e.target);
if(t.nodeName!="INPUT" && t.nodeName!="SELECT") return false;
if(e.keyCode==13){
f=t.form;
for(var i=0;i<f.length;i++){
if(t==f[i]){
if(e.shiftKey){
var n=(i==0)?f.l...続きを読む

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エンターキーを押したときに関数を呼び出す方法

エンターキーを押したときに関数を呼び出すにはどのようにプログラムを記述すればよいのですか?

Aベストアンサー

大抵の言語ではキーが押されたかというハンドラがありそのオブジェクトとして何のキーが押されたかの情報があります。
javascriptでもonKeyPressハンドラのオブジェクトwindow.event.keyCodeの内容を見てエンターキー(値は13)だけ処理をするという形にすれば云いと思います。
即席で作ったサンプルですが参考にして下さい。

<html>
<head>
<title>sample</title>
<script language="JavaScript">
<!--
function Key_on(key)
{
if(key == 13){
alert("ENTERが押されました");
}else{
alert("ENTER以外が押されました");
}
}
-->
</script>
</head>
<body onKeyPress="Key_on(window.event.keyCode)">
何かキーを押して下さい
</body>
</html>

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化したほうが、可読性が高くなると
思います。

Qタブキーでなくエンターキーで次の項目へ

すいませんおせーてください
で、ダブルポストです

すんごく初心者の質問かもしれません


よくある、資料請求系のページで
名前、住所、TEl、メアド・・・
とか入れていく仮定において2つ質問があります。


ある項目(例えばテキストボックス)を入力して
次の項目に映る時タブキーを押すと移動するのはわかるのですが、それがエンターキーで次の項目に移動できるようにはできるのですか?
送信を押したのと一緒の扱いになってしまうので何とかならないかな?と


もう一つは漢字モードと半角モードを自動的に
そのテキストボックスにフォーカスした時に
決めれるのですか?

2は出来た記憶があるのですが、どこにその説明が
あったかわかりません
1はわかりませんでした。

<form >で行うやり方はわかったのですが、
資料請求なので、あらかじめ
<form action=メールを送るcgi>
お名前input
住所input
送信キー
</form>

とformで囲っているため

多分
<form action=メールを送るもの>
<form action=エンターで次に移動するもの>
お名前input
住所input
送信キー
</form>
</form>

という囲いができないですよね?(←勘違いかもしれませんが)
<form>
</form>
<form>
</form>
ならOKですが・・

でjavascriptでできるのかな?と思ってダブルポストです。

どこかのURLでも構わないので教えてくださいませんか?

すいませんおせーてください
で、ダブルポストです

すんごく初心者の質問かもしれません


よくある、資料請求系のページで
名前、住所、TEl、メアド・・・
とか入れていく仮定において2つ質問があります。


ある項目(例えばテキストボックス)を入力して
次の項目に映る時タブキーを押すと移動するのはわかるのですが、それがエンターキーで次の項目に移動できるようにはできるのですか?
送信を押したのと一緒の扱いになってしまうので何とかならないかな?と


もう一つは漢字モード...続きを読む

Aベストアンサー

1.
以下のjavascriptと、そのページの<BODY>タグにonkeyDown="ChgKeyCode()"を記述します。
*****javascript****
function ChgKeyCode(){
if (!(event.srcElement.type == "button" || event.srcElement.type == "submit")){
if (event.keyCode == 13){
event.keyCode = 9;
}
}
}
ボタンであれば、送信を押した扱になります。

2.
テキストボックスでstyle="ime-mode: active;"を記述します。
ちなみに
active :初期値が日本語入力モードになります。
inactive :初期値が英数字入力モードになります。
disabled :英数字入力モードになります。ユーザーの操作によるモードの変更はできません。

いかがでしょうか?

QJavaScript Enterキーを押下時『TAB』の動きを割り当てたい

教えて下さい。

Enterキーを押下時『TAB』の動きを割り当てたいのですが、おわかりになりますでしょうか?

Aベストアンサー

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=shift_jis">
<TITLE>ヘ(・、ヘ)ホイホイ(ノ、・)ノホイホイ</TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
document.onkeydown = a;
function a(){
if(event.keyCode = 13){
event.keyCode = 9;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P>InternetExplorer5以上です<BR>NNのやりかたは分かりません。</P>
<P></P>
<P><INPUT id=button1 type=button value=ボタン1 name=button1><INPUT id=button2 type=button value=ボタン2 name=button2><INPUT id=button3 type=button value=ボタン3 name=button3></P>
</BODY>
</HTML>

こんな感じ?

でも「ボタン3」の次のフォーカスが
「アドレスバー」になります。
こうなっちゃうと、スクリプトでキーの取得ができなくなります。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=shift_jis">
<TITLE>ヘ(・、ヘ)ホイホイ(ノ、・)ノホイホイ</TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
document.onkeydown = a;
function a(){
if(event.keyCode = 13){
event.keyCode = 9;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P>InternetExplorer5以上です<BR>NNのやりかたは分かりません。</P>
<P></P>
<P><INPUT id=button1 type=button value=ボタン1 name=button1><INPUT id=button2 type=b...続きを読む

Qtabindex値の設定

tabindexの値を設定する方法を教えてください。

<input name='abc' id='abc' tabindex='xx' />

調べたら下記の方法でできると書いてありましたが、
上手くいきません。

document.getElementById('abc').tabindex='1';


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

Aベストアンサー

× .tabindex
○ .tabIndex

<script>
window.onload=function(){
document.getElementById('a').tabIndex='3';
document.getElementById('b').tabIndex='2';
document.getElementById('c').tabIndex='1';
}
</script>

<input name='a' id='a' />
<input name='b' id='b' />
<input name='c' id='c' />


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

人気Q&Aランキング