web-dev-qa-db-ja.com

塗りつぶされた後、フォーカスが自動的に次のテキストフィールドに移るこの入力要素を何と呼びますか?

screenshot of input field

シリアル番号や同様のコードを入力するときに、このinput要素をよく見ました。各テキストフィールドはN文字を受け入れます。その後、フォーカスは自動的に次のフィールドに移動します。フィールドに文字がないときにバックスペースを押すと、フォーカスが前のフィールドに移動します。このように、フィールドは読みやすくするために分離されていますが、コンテンツは使いやすくするためにフローしています。

これが以前に尋ねられた場合は申し訳ありませんが、使用する検索用語がわからない場合は検索するのが困難です。

41
seth10

私はこれを常にAuto Tabまたは(Auto tab input fields)と呼んでいます。実際のところ、自動タブを検索すると、この要素を実装するさまざまな方法が得られます。

そして Microsoft dev でもそのように呼んでいます。

51
Devin

定型入力

これは、定型入力の実装の例です。

定型入力とは、開発者が定義した文字列式のことで、テキストボックスへの入力としてユーザーが何を入力できるかを制御します。

定型入力の頻繁な使用には、電話番号、郵便番号、郵便番号、時間と日付の入力が含まれます。

https://en.wikipedia.org/wiki/Input_mask

この例は、通常1つの入力ボックスで構成されており、その中にルール/ダッシュが実装されているため、通常の定型入力よりも少し複雑ですが、同じ目的を果たします。

21
DasBeasto

私はそれを自動タブと呼んでいますが、可能であればこれらの使用は避けてください!

それらは悪いUXを持っています-ユーザーが入力の最後の文字を間違えた場合、削除(他の入力の99.9%に期待される機能)を打つことはできません。他の入力に戻るには、マウスまたはShift + Tabを使用する必要があります。また、コピー/貼り付け機能を台無しにします。

特定の状況下ではこれは恵みです。ユースケースは、銀行や政府機関などで一般的な固定長データを使用する官僚的な形式であり、ユーザーは1日に数時間機能します "。 マスクされた入力 を使用して、スペース、ダッシュなどで入力をフォーマットするだけでこれを解決できます

masked input

複数の入力を使用すると、データが不必要にフラグメント化され、フロントエンドまたはバックエンドのいずれかで連結する必要があることを意味します。

連結することを意図しておらず、データを個別のアイテムとして保存する必要がある場合は、バックエンドで分割します。UXはそれから切り離す必要があります。

私が考えることができる唯一の有効なユースケースは、海賊を貼り付けるのではなく、キーコードをタイプアウトさせることによって海賊をトロールすることです。 ;)

16
Nathron