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

nonbirito
(@nonbirito)

1年、 7ヶ月前

お世話になります。

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

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

よろしくお願いします。

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

munyagu
(@munyagu)

1年、 7ヶ月前

こんにちは

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

トピック投稿者 nonbirito
(@nonbirito)

1年、 7ヶ月前

munyagu さん

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

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

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

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

1年、 7ヶ月前
こういう感じで良いと思います。
ただし、ただコピペするだけでなく、必ずコードの意味を理解し、自分の環境にあわせて適切にカスタマイズするようにしてください。
```
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)

1年、 7ヶ月前

Aki Hamano さん

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

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

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

トピック「MW WP Formでカーソルの自動移動をしたい」には新たに返信することはできません。

トピックタグ

表示