#質問内容
HTML + CSS(Bootstrap) + JavaScript(jQuery) + Java(Struts)という環境の業務システムを担当しております。
業務システムのためソースコードすべてをここに載せるわけにはいかず、ご理解ください。
今回、下記機能の修正要望があり、一からソースコードを追いかけているところなのですが
「3. モーダル内に~自動セット」という処理が見つけられず困っています。
- 画面上で数字キー(0~9)を押下
- モーダルが起動
- モーダル内にある以下のタグに押下した数字を自動セット
(※)素早く3桁程度を入力すれば入力した数字がすべて自動セットされる
html
1<div class="modal fade" id="modal"> 2 <div class="modal-dialog"> 3 <div class="modal-content"> 4 <div class="modal-header"><!--省略--></div> 5 <div class="modal-body"> 6 7 <!--入力した数字が入るフォーム--> 8 <input type="number" id="input_num" /> 9 10 </div> 11 <div class="modal-footer"><!--省略--></div> 12 </div> 13 </div> 14</div>
下記「調べたこと」以外に調べ方、検索キーワードがありましたらご教示ください。
または、入力キーを自動セットするようなプラグインなどをご存知の方がいましたらご教示ください。
###2017/12/4追記
大まかにですが処理の流れは以下の通りです。
javascript
1$(function() { 2 //モーダルの表示が完了したとき 3 $('#modal').on('shown.bs.modal', function(e) { 4 var target = document.getElementById('input_num'); 5 target.value = target.value; 6 var len = target.value.length; 7 target.focus(); 8 target.setSelectionRange(len, len); 9 }); 10 11 //画面上でキー入力を行ったとき 12 $(document).keydown(function(e) { 13 //入力値によって分岐 14 //0~9の場合 15 dispModal(e); 16 }); 17}); 18 19function dispModal(e) { 20 //各種チェック処理、JavaBeans更新処理 21 //モーダル起動 22 $('#modal').modal('show'); 23}
モーダル起動はdispModal
内で行っているようです。
そのタイミングでモーダルの表示が完了した時の処理も自動的に走ります。
モーダルの表示が完了した時の処理は、何がしたいのかイマイチわからなかったので全文書いてみました。
関係しているかは不明ですが、参考になれば幸いです。
#調べたこと
##ID指定のセット
JavaScript、jQueryのID指定で要素を取得し値をセットしている箇所はありませんでした。
※IDで調べました
javascript
1//JavaScript 2document.getElementById('input_num').value = keyCode; 3//jQuery 4$('#input_num').val(keyCode);
##フォーカス設定時イベント
モーダルの表示完了時に<input>
にフォーカスをあてている箇所があり
この一行をコメントアウトしたところ数字が自動セットされなくなったので
フォーカスイベントが関係しているのは間違いなさそうなのですが
focusin
などのキーワードで全検索してもそれらしい箇所はなさそうでした。
javascript
1$('#モーダルのID').on('shown.bs.modal', function(event) { 2 $('#input_num').focus(); 3});
###2017/12/4追記
以下のように#any_input
を追加し、#any_input
にフォーカスをあてるよう処理を変更すると
入力した数字は#any_input
にセットされました。
しかし、フォーカスのあたっている要素を取得するdocument.activeElement
は使っていませんでした。
html
1<!--入力した数字が入るフォーム--> 2<input type="number" id="input_num" /> 3<input type="text" id="any_input" />
##setInterval、setTimeout
数字キーは3桁程度なら連続して入力できるので
setInterval
やsetTimeout
を使っているのかと思いましたが
それらしい箇所はありませんでした。
回答1件
あなたの回答
tips
プレビュー