WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > javascriptサンプル > <nextfield>「次項目に自動移動」

MAXレングス入力で次項目に自動移動

最大入力桁数まで入力したら、自動で次の項目へカーソルを移動します。
郵便番号、電話番号、クレジットカード番号など、入力桁数が決まっている項目の入力が簡易化できます。

広告

maxlength入力で次項目に自動移動のサンプル

maxlength属性に指定した桁数の入力で次項目に自動で移動します。
※maxlengthの指定不可の項目（チェックボックス、ラジオボタン、一般ボタンなど）からは、移動しません。

郵便番号 - （maxlength＝3-4）
住所 （maxlength＝20）
電話番号 - - （maxlength＝5-4-4）
電話種類 自宅 携帯　（移動しません）
確認 　（移動しません）

maxlength入力で次項目に自動で移動するjavascript
function nextfeild(str){
if (str.value.length >= str.maxLength) {
for (var i = 0, elm = str.form.elements; i < elm.length; i++) {
if (elm[i] == str) {
(elm[i + 1] || elm[0]).focus();
break;}}}
return(str);}
ページTOP

指定した桁数入力で次項目に自動移動のサンプル

最大入力桁数をjavascriptの引数に指定し、その桁数の入力で次項目に自動で移動します。
maxlengthの指定不可の項目の移動も可能です。また、maxlengthと相違する桁数を引数に指定した場合、指定した桁数の入力で移動します。

ラジオボタン a b　（桁数＝1を指定）
チェックボックス A B　（桁数＝1を指定）
一般ボタン 　（桁数＝2を指定）
テキストエリア 　（桁数＝10を指定、maxlength＝20）
テキスト１ 　（桁数＝5を指定、maxlength＝10）
テキスト２ 　（桁数＝10を指定、maxlength＝10）

指定した桁数入力で次項目に自動で移動するjavascript
function nextfeild2(str,len){
if (str.value.length >= len) {
for (var i = 0, elm = str.form.elements; i < elm.length; i++) {
if (elm[i] == str) {
(elm[i + 1] || elm[0]).focus();
break;}}}
return(str);}
ページTOP

注意事項

  • 日本語入力の場合、ブラウザによってmaxlengthの判定タイミングや、その後の動作が異なります。
    ◆Internet Explorer、Chrome　：　入力時点で、maxlengthを判定し、maxlengthに到達した時点で次項目へ移動します。
    ◆Firefox　：　入力確定時に、maxlengthを判定し、maxlengthに到達していた場合、maxlength以上の入力は消去し、次項目へ移動します。
    ◆Safari　：　入力時点で、maxlengthを判定し、maxlengthに到達した時点で入力内容が消去されます。そのため、次項目へは移動しません。
ページTOP
関連するJavaScript
キーコード一覧（キーコード取得）
数値のみ入力可能とする
小文字を入力しても大文字に変換。大文字を入力しても小文字に変換
IME制御。日本語入力の状態を検知
カンマ付きで入力（金額入力）
入力抑止（PFキーやアプリケーションキー抑止）
半角⇔全角自動変換
入力可能文字数の表示
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン