質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    20845questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    9090questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • jQuery

    8307questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 836

associate

score 2

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2017/08/22 14:06

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 3

checkベストアンサー

+2

考え方は色々有りますが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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/22 12:46

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

    キャンセル

  • 2017/08/22 12:54

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

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

    キャンセル

  • 2017/08/22 13:04

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

    キャンセル

  • 2017/08/22 13:14

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

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

    キャンセル

  • 2017/08/22 14:39

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

    キャンセル

  • 2017/08/23 11:10

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

    キャンセル

  • 2017/08/23 12:28

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

    キャンセル

  • 2017/08/23 12:37

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

    キャンセル

+1

単純にテキストエリア以外でエンターキーが効かなければ良いのではないでしょうか?
ページのスラッグが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>';
}
?>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/22 13:15

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

    キャンセル

  • 2017/08/22 14:31

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

    キャンセル

  • 2017/08/22 15:01

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

    キャンセル

+1

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/23 12:38

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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20845questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    9090questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • jQuery

    8307questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。