概要
現在、お問い合わせ番号を自動で整形してくれるような入力フィールドの作成しております。
しかし、なかなかこちらが想定している動作をしてくれず困っています。
詳細・実現したいこと
1.「9-999-999-999」の形式で表示されること。
2.入力途中でカーソル位置をずらし値を挿入及び削除しても、カーソル位置は元の場所に留まり、1の通り表示されていること。
試したこと
1.https://stackoverflow.com/questions/49421414/angular-2-add-hyphen-after-every-4-digit-in-input-card-number-input
→正常に入力ができることを確認。しかし、入力時カーソルを移動させて追加・削除を行うとカーソル位置が最後尾に移動してしまう。
以下ソース
TypeScript
1 // 入力値退避用変数 2 bk_no = ""; 3 Inquiry_no; 4 mychange(val) { 5 // 未入力の場合 6 if (val.length == 0) return; 7 let chIbn = val.split('-').join(""); 8 // 先頭文字を退避 9 let h_no = chIbn.slice(0, 1) + "-"; 10 // 先頭以降の文字列を退避 11 let b_no = chIbn.slice(1); 12 if (b_no.length > 9) { 13 b_no = b_no.slice(0, 9); 14 } 15 console.log("先頭文字以外:" + b_no); 16 if (b_no.length > 0) { 17 b_no = b_no.match(new RegExp('.{1,3}', 'g')).join('-'); 18 } 19 // 入力中のお問い合わせ番号に変更があった場合は結合を回避 20 if ((val.length < this.bk_no.length && val.length < 13) || this.avoid_flg) { 21 this.bk_no = val; 22 return; 23 } 24 this.Inquiry_no = h_no + b_no; 25 // 現在の入力値を退避 26 this.bk_no = val; 27 }
HTML
1<input matInput type="text" name="din" id="din" (ngModelChange)="mychange($event)" class="form-control" [ngModel]="Inquiry_no" maxlength="13">
2.https://webkikaku.co.jp/blog/htmlcss/form_js_customize/
→npmインストール後を試みるも、new fomatterにてundefinedでエラーが発生し断念。
以下ソース
TypeScript
1this.Inquiry_no = new Formatter.formatter(document.getElementById('din'), { 2 'pattern': '{{9}}-{{999}}-{{999}}-{{999}}', 3 'persistent': true 4}
HTML
1<input matInput type="text" name="din" id="din" pattern="d*" class="form-control" maxlength="13">
3.https://stackblitz.com/angular/plqrqqvmaak?file=app%2Fform-field-custom-control-example.ts
→サンプル通りに実装を試みるも、正常に動作せず断念。
※3はサンプルをほぼそのまま使用しているため、ソース省略。
以下にどういうことを試みたかを記載させて頂きます。
〇サンプルではinputフォームを3分割にしているhtmlを別途用意しているが、その通り実装すると画面が真っ白になり、なにも表示されませんでした。
〇直下のhtml側に直接、inputフォーム3つを書き込んだ場合には動作自体はすることを確認。しかし、入力途中でカーソル位置を移動させようとすると意図しない動作(最後尾にカーソル位置が移動)をすることを確認。
開発環境
開発環境
Angular:6.1.0
Node:8.11.2
OS:win32 x64
typescript:2.7.2
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。