MW WP Formでカーソルの自動移動をしたい

  • nonbirito

    (@nonbirito)


    2年、 4ヶ月前

    お世話になります。

    最近、MW WP Form でお問い合わせフォーム作り始めました。
    電話番号の入力などで、入力後に自動で次の入力フォームに移動してカーソルを合わせたいと思っています。
    [mwform_tel name=”tel”]追加で以下のような入力フォームができますので、この入力項目の移動を自動化したいのですが方法がわからず悩んでいます。
    [　　]-[　　]-[　　]
    それぞれの項目には、
    maxlength=”5″ / maxlength=”4″ / maxlength=”4″
    が指定されていましたので、maxlength=” ” を使用する方法などを調べてみたのですが、MW WP Formに実装する方法がわかりません。

    どなたかご存じの方がいらっしゃいましたら、ご教示いただけないでしょうか？

    よろしくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • munyagu

    (@munyagu)

    2年、 4ヶ月前

    こんにちは

    「HTML カーソル 自動移動」などで検索されてはどうでしょうか。

    トピック投稿者 nonbirito

    (@nonbirito)

    2年、 4ヶ月前

    munyagu さん

    返信いただきまして、ありがとうございます。
    ご指摘いただいたワードなどでの検索などはすでに行い、HTMLでのやりかたはいくつか参考になるサイトが見つかりました。

    今回こちらで質問させていただいたのは、MW WP Formに実装する方法についてです。

    HTMLでのやりかたを応用していろいろ試してみましたが、MW WP Formではカーソル移動ができなかったしだいです。

    引き続き、どなたかご存じの方がいらっしゃいましたら、ご教示を頂きたくお願いいたします。

    Aki Hamano

    (@wildworks)

    2年、 4ヶ月前

    こういう感じで良いと思います。
    ただし、ただコピペするだけでなく、必ずコードの意味を理解し、自分の環境にあわせて適切にカスタマイズするようにしてください。

    const inputs = document.querySelectorAll( 'input[maxlength]' )

inputs.forEach( function( input, index ){
	input.addEventListener('keyup', function( e ){
		const maxLength = parseInt(e.target.getAttribute( 'maxlength' ));
		const valueLength = e.target.value.length;
		const isFullFilled = maxLength === valueLength;
		const nextInput = inputs[ index + 1 ];
		if ( isFullFilled && nextInput ) {
			nextInput.focus();
		}
	})
});
    トピック投稿者 nonbirito

    (@nonbirito)

    2年、 4ヶ月前

    Aki Hamano さん

    ご教示いただきまして、ありがとうございます。
    教えていただいたソースを勉強して、試してみたいと思います。

    ありがとうございました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「MW WP Formでカーソルの自動移動をしたい」には新たに返信することはできません。