- 締切済み
Enterキー と Tabキー を同じ機能にしたいです。
Enterキー と Tabキー を同じ機能にしたいです。 Enterキー を押すとsubmit されてしまうのを防ぎ、 かつ、Enterキー で TABキーと同じように次の入力項目へ進むようにしたいのですが、 いい方法はありますでしょうか。 Enterキー を無効化にするのは教えていただいたのですが、 次の入力項目へ進むようにする方法をどうぞ ご教示ください。 よろしくお願いいたします。
- flanc8
- お礼率48% (16/33)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
ていせいします。ただしいあたいをかえしていませんでした。 AutoNextForm.nextElement = function (n) { var e; do if (! (n = (e = n, e.firstChild || e.nextSibling))) do if (! (e = e.parentNode)) return null; while (! (n = e.nextSibling)) while (!(/INPUT|SELECT|TEXTAREA/.test(n.nodeName) && !('INPUT' == n.nodeName && 'hidden' == n.type))) return n; }
- babu_baboo
- ベストアンサー率51% (268/525)
No2です。 ぜんかくくうはくもじは、はんかくにでもなおしてね。ばぶぅ～
- babu_baboo
- ベストアンサー率51% (268/525)
かこのしつもんをさんこうにすれば、そのようなことは やるべきでない！とかあります。 そうおもうんだけど、じっさいあるとね～。 えんたーきーがおされたら、つぎのフォームをさがします せっかくのtabIndexは、かんがえてないじょ。 それは、りすとにしてそーとすべきか・・・ かんたんなことを、むずかしっぽくかいているかぁ～？ ばぶぅ～。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>エンターキーで、次のフォームに移動してみる</title> <body> <form action="#" method="post"> <p id="q1"><input type="text" name="a0"></p> <p id="q2"> <input type="radio" name="a1">abc <input type="hidden" value="abc"> <input type="radio" name="a1">def </p> <p id="q3"> <input type="text" name="a3"> <input type="checkbox" name="a4"> </p> <p> <input type="button" name="a5" value="test" onclick="alert('ok')"> </p> <p> <textarea cols="70" rows="6"> 困ったときの解決策は、みんなが共有できる財産となる。 その財産を見つけるための道を、迷路のようにするべきではない。 つまり、同じような質問を、複数かかげるのは、迷路を作っているのと 同じこと。質問を閉じないのを見ると腹立たしい思いがする。 今後同じように困った人が、探してたどり着いたら、解決にいたらない 質問だらけで、解決策にたどり着けなかったら、悲しくない？ </textarea> </p> <p id="q5"> <input type="text" name="a6"> <input type="checkbox" name="a7"> </p> </form> <script type="text/javascript"> //@cc_on var AutoNextForm = function () { document./*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'keypress', AutoNextForm.Listener, false); /*@if (@_jscript) attachEvent('on' + @else@*/ addEventListener( /*@end@*/ 'unload', AutoNextForm.Finalizer, false); }; AutoNextForm.nextElement = function (node) { var n; do { n = node; while (n = n.firstChild || n.nextSibling) if ((/INPUT|SELECT|TEXTAREA/.test(n.nodeName)) && ! ('INPUT' === n.nodeName && 'hidden' === n.type) ) return n; do n = (node = node.parentNode) ? node.nextSibling: null; while (node && !n) } while (node = n) return null; } AutoNextForm.Listener = function (evt) { var target = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/; if (! /INPUT|TEXTAREA|SELECT/.test(target.nodeName)) return var keyCode = evt./*@if (@_jscript) keyCode @else@*/ which /*@end@*/; var shift = evt.shiftKey; var e; if (27 === keyCode) { target.blur(); } if (13 === keyCode) { if ('INPUT' === target.nodeName && /submit|reset|button/.test(target.type) && shift) return; if ('TEXTAREA' === target.nodeName && !shift) return; e = AutoNextForm.nextElement(target); e && e.focus(); evt./*@if(@_jscript) returnValue = false @else@*/ preventDefault() /*@end@*/; } }; AutoNextForm.Finalizer = function (evt) { document./*@if (@_jscript) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/ 'keypress', AutoNextForm.Listener, false); /*@if (@_jscript) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/ 'unload', AutoNextForm.Finalizer, false); }; //____ AutoNextForm(); </script> </body>
お礼
ありがとうございました。 参考になりました。
- askaaska
- ベストアンサー率35% (1455/4149)
無効化する方法を知っているのなら そこにちょちょいと手を加えればOKよ。 そのロジックはこんな感じ。 if (event.keyCode == 13) { event.keyCode = 9; } これ以上は自力でガンバよ。
お礼
ありがとうございました。 参考になりました。
お礼
ありがとうございました。 参考になりました。