【WordPress】お問い合わせフォームでエンターを押した際に次のインプットに移動したい

Question

WordPressでウェブサイトを構築しております。
WP MW formというプラグインを利用してお問い合わせフォームを設置しているのですが、入力中にエンターキーを押した際に確認画面へ移動してしまうので、エンターキーを押した際にtabキーを押した動作と同様に、次のインプットに移動する作りにしたいと考えております。

javascriptで制御できるかと思うのですが、疎いためどのような記述をすればよいか分かりません。
可能であれば、コードの要点の解説もしてくださると大変助かります。

何卒よろしくお願い致します。

【追記 2017/08/22】
実際に運用するフォームです。

Answer 1

考え方は色々有りますがe.keyCodeをチェックするのが一般的です
ただしtabindex通りに移動したい時どうするかとか
type=text以外はどうしたいのかなど仕様を固める必要があります

document.addEventListener('keydown',function(e){
  var t=e.target;
  if(t.nodeName=="INPUT" && t.type=="text" && e.keyCode==13){
    var f=t.form;
    for(var i=0;i<f.length;i++){
      if(f.elements[i]==t){
        f.elements[(i==f.length-1)?0:i+1].focus();
      }
    }
    e.preventDefault();
  }
});

<form>
<input type="text" name="n1" tabindex="1">
<input type="text" name="n2" tabindex="2">
<input type="text" name="n3" tabindex="4">
<input type="text" name="n4" tabindex="3">
<input type="submit" value="go">
</form>

追記

ご指定の内容で特に問題ないようですよ
ご利用の環境ではなにかライブラリでキーイベントに機能が付加されているのかもしれません
email、hiddenに対応しました

<script>
document.addEventListener('keydown',function(e){
  var t=e.target;
  if(t.nodeName=="INPUT" && (t.type=="text"||t.type=="radio"||t.type=="email") && e.keyCode==13){
    var f=t.form;
    var k=0;
    for(var i=0;i<f.length;i++){
      if(f.elements[i]==t){
        for(var j=1;j<=f.length;j++){
          var k=(i+j*(e.shiftKey?-1:1)+f.length)%f.length;
          if(f.elements[k].type!="hidden") break;
        }
        f.elements[k].focus();
        break;
      }
    }
    e.preventDefault();
  }
});
</script>
<form>
<table>
<tbody>
<tr><td>要件：</td><td><input type="radio" name="yoken" value="問い合わせ">問い合わせ
<input type="radio" name="yoken" value="サンプル">サンプル
<input type="radio" name="yoken" value="その他">その他</td></tr>
<tr><td>会社：</td><td><input type="text" name="kaisha"></td></tr>
<tr><td>名前：</td><td><input type="text" name="namae" required>(必須)</td></tr>
<tr><td>mail：</td><td><input type="email" name="mail" required>(必須)</td></tr>
<tr><td>電話：</td><td><input type="text" name="denwa">
<input type="hidden" name="hoge1" value="fuga">
<input type="hidden" name="hoge2" value="fuga">
<input type="hidden" name="hoge3" value="fuga"></td></tr>
<tr><td>住所：</td><td><input type="text" name="jusho"></td></tr>
<tr><td>内容：</td><td><input type="text" name="naiyo" required>(必須)</td></tr>
</tbody>
</table>
     

Comments

[yambejp]

あと、shiftキーを押しながらエンターだと逆順に回るなどの仕様はよくつかうとおもいます

[associate]

ご回答ありがとうございます。
簡易的に実装したいだけなので、細かい点は考慮しなくてもよいかと考えております。
（tabindexについては、初期のままで、type=text以外は動作なし）

form内のinput要素をエンターを押すごとに上から巡回する、というつくりが理想的です。
（name属性は出来れば項目名を入れたいので数値などは避けたいです）

[yambejp]

一応例示したのとほぼ合致していると思います
試してみて動きが違うようならご指摘下さい

[associate]

※質問内容にフォームの画像を追加しました。

おおよそ意図通りの動きをするのですが、メールアドレスの項目から電話番号の項目へ移動する際にフォームが送信されてしまいます。（また、電話番号から住所へ移動する際も同様です。）
電話番号の項目はtype=textです。
考えられる原因などは御座いますでしょうか？

[yambejp]

検証しましたが問題なさそうです。
再現できないので画像ではなくhtmlテキストで貼ってもらったほうが
よいかもしれません

[associate]

ありがとうございます。
フォームが送信されてしまうポイントを確認してみたところ、原因となっていたメールアドレスの項目と電話番号の項目ですが、
メールアドレスの項目はtype=textでなく、type=emailになっていたので、頂いたソースにt.type="email"を付け足すことで解決致しました。
電話番号の項目についてですが、確認したところ項目のあとにtype=hiddenが隠れていることがわかりました。同様にt.type="hidden"と付け足したのですが解決できませんでした。
hiddenを飛ばすにはどのようにすればよいでしょうか？
度々申し訳ありません。よろしくお願い致します。

[yambejp]

hiddenは想定外でした
たしかにfocusさせられないですね
冗長な処理になりましたが対処しておきました

[associate]

ありがとうございます。意図通りの動作となりました。
次質問する際は、もう少し勉強してからするように致します。
ご丁寧に対応頂きありがとうございました。また宜しくお願い致します。

Answer 2

こちらのサイトもご参考にどうぞ！
・http://program-study.hatenablog.com/entry/2013/10/01/210032
・http://www.openspc2.org/reibun/javascript/mouse/053/
・http://blog.makotoishida.com/2013/02/javascript-enter.html

Comments

[associate]

ありがとうございます。
参考にして勉強致します。

Answer 3

単純にテキストエリア以外でエンターキーが効かなければ良いのではないでしょうか？
ページのスラッグがcontactだとして

<?php
if ( is_page( 'contact' ) ){
echo '<script>$(function(){$("input").on("keydown", function(e) {if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {return false;} else {return true;}});});</script>';
} ?>

そのページのテンプレートかheader.phpにでも書いておけば良いです。
参考まで。

追記
少し調べればいくらでも情報はあると思いますけど。
https://teratail.com/questions/14080
このページのコードそのままです。

<?php
if ( is_page( 'contact' ) ){
echo '<script type="text/javascript">$(window).load(function() {$("input,select").on("keypress", function(ev){var $me = $(this);var $list = $("input:enabled:not([readonly]),select:enabled");if (ev.keyCode == 13) {$list.each(function(index){if ($(this).is($me)) {$list.eq(index+1).focus();ev.preventDefault();}});}});});</script>';
}
?>

Comments

[associate]

ご回答ありがとうございます。
目的は「エンターキーでフォームを送信することを防ぐ」ではなく「エンターキーを押した際に次のインプットへ移動する」です。
よろしくお願いします。

[associate]

ありがとうございます。
張って頂いたトピックのコードも一通り試したのですが、上手く行きません。
恐らく、利用しているプラグインとの相性が良くないのだと考えております。
もう少し粘ってから質問するようにします。またよろしくお願い致します。

[退会済みユーザー]

ブラウザのデベロッパーツールでエラーが出てないかなど確認しながらやってみてください。
頑張ってください。