Q&A
ありがとうございます。
”丁目や番地を入れる入力欄を増やし、カーソルを自動入力後はそこへ飛ばしてinputの背景色を変えます。”
上記の 事をする場合入力欄を増やしてカーソルを飛ばすsampleコードや参照ページがありましたら
教えていただきたいです。ご検討お願いします
html5の「pattern」属性で漢字とひらがなと英数字を必須にしたいと考えています
コンタクトフォームの住所入力項目で
郵便番号から自動で住所が出ます
例
<div class="form-group" data-formrun-class-if-success="has-success" data-formrun-class-if-error="has-danger" data-formrun-target="住所"><label class="form-control-label" for="email">住所 <span class="haveto">必須</span></label>
<div class="row"> <div class="cp_iptxt" data-formrun-hide-if-confirm> <input type="text" placeholder="郵便番号 168-0081(ﾊｲﾌﾝ有)" pattern="^[0-9]{3}-[0-9]{4}$" class="form-control" id="name" name="郵便番号" data-formrun-type="postal-code-jp" data-formrun-required="" data-formrun-type="postal-code-jp" data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger"><i class="fas fa-tenge fa-lg fa-fw" aria-hidden="true"></i> <div class="text-danger" data-formrun-show-if-error="郵便番号">正しく入力してください</div> </div> <div class="cp_iptxt" data-formrun-show-if-confirm> <span data-formrun-confirm-value="郵便番号"></span> </div> <div class="cp_iptxt" data-formrun-hide-if-confirm><input type="text" placeholder="東京都杉並区宮前1-15" class="form-control" id="name" name="住所" data-formrun-type="region locality street-address" data-formrun-required="" data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger"><i class="fa fa-address-card fa-lg fa-fw" aria-hidden="true"></i>
<div class="text-danger" data-formrun-show-if-error="住所">正しく入力してください</div>
</div>
<div class="cp_iptxt" data-formrun-show-if-confirm>
<span data-formrun-confirm-value="住所"></span>
</div>
<input type="text" placeholder="マンションビル名" class="form-control" id="name" name="マンションビル名" data-formrun-type="build" data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger"><i class="fas fa-building faa-horizontal animated fa-lg fa-fw" aria-hidden="true"></i>
<div class="text-danger" data-formrun-show-if-error="マンションビル名">正しく入力してください</div>
</div> </div><div class="cp_iptxt" data-formrun-show-if-confirm> <span data-formrun-confirm-value="マンションビル名"></span> </div>
郵便番号を例えば
168−００８１と入力すると
住所画面には
東京都杉並区宮前までしか出ません
当然ですがそのあとに番地などがあるはずなのですが
それをとばしてマンション名を書いてくる人が多くもう一つ
項目を増やした方がいいのか迷っています。
できれば今の３つの項目のままいきたいのですが
回答3件
0
基本的なお話
「〒163-0710」
で
「東京都新宿区西新宿小田急第一生命ビル(10階)」
まで判ります
で日本の郵便は大変優秀で
「〒168-0081」
で
「東京都杉並区宮前」
まで判ります
そこからふつうは番地まで書いてからビル名が正式なのですが
例「東京都杉並区宮前0-0 xxxビル3F」
番地なしでも届きます
例「東京都杉並区宮前 xxxビル3F」
これは郵便番号で大きく仕分けしてあとは配達員さんが
細かい番地、ビル等を判別してくれるからです。
（一部はAIも使っていますが判別不能もありますから）
なので郵便を届ける住所表記としては間違いではないのです。
質問者様のような場合入力項目の下に例を表示するようにしましょう。
住所には番地等含めて記載下さい 例「宮前0-0」
また建物名は間隔を開けてご記入下さい。 例「宮前0-0 xxxビル3階」
これでだいぶ記入漏れは少なくなります。
投稿2020/10/05 01:34
総合スコア2506
0
当然ですがそのあとに番地などがあるはずなのですが
当然ではありません。東京都青ヶ島村役場の住所は「東京都青ヶ島村無番地」で終わりです。英数字を入れる余地もありません。
投稿2020/10/08 01:17
総合スコア146018
0
ベストアンサー
数字を必須にした場合、例えばですが丁目や番地の数字を漢字で書いてしまうとエラーが出ますよね。
また丁目がない住所もありますし、日本の住所はややこしいのでそれをプログラム側ですべて補うのは難しいと思います。
なので、ユーザビリティの向上で対応するのがいいのではないでしょうか？
飛ばしてしまう理由はいくつか考えられますが
郵便番号から住所が自動入力された後にカーソルを自分で動かさないといけない場合、
住所が自動入力されていれば飛ばす人が多いのかもしれません。
そういった場合、丁目や番地を書く入力欄を設け、自動入力後はそちらにカーソルを自動で飛ばしたり、
カーソルがある部分のinputの色を変えたりとわかりやすいように
誘導することを考えてみてはいかがでしょうか？
私であれば、
丁目や番地を入れる入力欄を増やし、カーソルを自動入力後はそこへ飛ばしてinputの背景色を変えます。
また、自動入力の住所が入力されている場合で丁目や番地が空欄の場合はやんわりと入力をお願いするような吹き出しなども付けると思います。
イメージ図
しつこくしすぎるとかえってページからの離脱もあると思うので
訪問者の年齢層などによって変えるといいと思います。
投稿2020/10/05 01:34
編集2020/10/05 02:08
総合スコア716
郵便番号から自動で住所を入力しているのはどういったものでしょうか？ajaxzip3とかですかね？
こちらを参考にしています。
http://www.webdesign-fan.com/ajaxzip3
郵便番号入力後、町名、番地にfocusするようにするにはこのコードであってますでしょうか？
<script>
$('input').on('keyup', function() {
const max = $(this).attr('maxlength'); //最大文字数
const current = $(this).val().length; //現在の文字数
//最大文字数を超えたかどうか？
if(current >= max) {
$(this).next().focus();
}
})
</script>
簡単に書くとですが、
AjaxZip3.zip2addrの7番目の引数に自動フォーカスのon/offのフラグがあるのでそれをfalseにしてもらって、検索が成功したときにフォーカスさせるというのができます。
<script>
AjaxZip3.onSuccess = function() {
document.getElementsByName('addr12')[0].focus(); // 番地、建物名にフォーカス
};
</script>
ありがとうございます！！やってみますね
ただ、今のままだと間違って入力した時の処理などがないと思うのでそういった部分も考えるべきだと思います。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/05 13:21