質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

802閲覧

画面上で入力した数字キーをモーダル内のinputタグへ自動セットする方法

whitia

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/12/02 13:55

編集2017/12/04 10:13

#質問内容

HTML + CSS(Bootstrap) + JavaScript(jQuery) + Java(Struts)という環境の業務システムを担当しております。
業務システムのためソースコードすべてをここに載せるわけにはいかず、ご理解ください。

今回、下記機能の修正要望があり、一からソースコードを追いかけているところなのですが
「3. モーダル内に~自動セット」という処理が見つけられず困っています。

  1. 画面上で数字キー(0~9)を押下
  2. モーダルが起動
  3. モーダル内にある以下のタグに押下した数字を自動セット

(※)素早く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桁程度なら連続して入力できるので
setIntervalsetTimeoutを使っているのかと思いましたが
それらしい箇所はありませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defghi1977

2017/12/03 00:40

まず, あなたの質問からはasis(現状こうなっており) tobe(こうしたい)の内容が正確に読み取れません. また, 「業務システムのためソースコードすべてをここに載せるわけにはいかず」は十分理解できますが, もう少し処理フローを記述するなり公開するコードを増やすなりしませんと的確なアドバイスは不可能です. なお「困っている」等の質問に直接関係のない些末な内容は記述しないほうが良いでしょう.
x_x

2017/12/04 06:00

通常数字キー入力だけでは起動しないと思うのですが、「モーダルが起動」の箇所のスクリプトは提示できないのでしょうか?
whitia

2017/12/04 10:15

defghi1977さん ご指摘ありがとうございます。大まかにですが処理フローを記載致しました。
whitia

2017/12/04 10:16

x_xさん 処理フローを記載致しました。モーダルの起動方法について、dispModalファンクション内をご覧ください。
x_x

2017/12/04 10:34

スクリプトでどこかからセットしているというよりも、単にフォーカスのある所に(ユーザーが)入力している可能性があるのではないですか?
whitia

2017/12/04 10:40

x_xさん それは無いと思ってください。私自身、何度も動かしているので、記載した動きに間違いはありません。
defghi1977

2017/12/04 10:50

keydownでinput_numにフォーカス移動させて, input_numに直接入力しているだけじゃないの?
whitia

2017/12/05 10:03

defghi1977さん 具体的にはどのようなコードになるでしょうか?
whitia

2017/12/05 10:04

x_xさん Chromeのバージョン33以降はエラーが出るようです。業務システムはIEサポートなので当該エラーは出ておりません。
guest

回答1

0

ベストアンサー

Bootstrapについては全く知らないことを前置きしておきます.


質問の内容を正確に読み取れていないため, 次のことが知りたいものとして回答します.

「提示したコードではinput_numに値を設定していないように見えるにもかかわらず, キー入力値がそこに反映される」

なんというか, 当たり前のことを深く考えすぎているように見えます. コードを見て下さい.

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}

もしinput_numにフォーカスが当たっていなかったとしましょう.ここでキー入力を行うと次の処理フローが発生します.

  1. documentkeydownイベントをキャッチし, $(document).keydown(function(e)〜部のコードが実行される.
  2. dispModal(e)が実行される.
  3. $('#modal').modal('show');が実行されモーダルが表示される.
  4. $('#modal').on('shown.bs.modal', function(e)〜部のコードが実行される.
  5. input_numが検索され, フォーカスをそこに移動する.
  6. その結果, フォーカスが当たっているinput_numkeydown時のキーコードが挿入される.

敢えて言うならば「input_numが検索され, フォーカスをそこに移動する」処理がキー入力が行われている直接的なコードです.

ここで素早く3回キー入力すると, モーダルが表示される(キー入力が無効化される前)にkeydownイベントが3回発生し, モーダルの表示処理が3回呼び出され, 結果input_numに3つの文字が出力されます.

で, この動作が**「正しい動作」なのか「意図しない動作」なのかについて, あなたは一切言及していない**ためこれ以上のアドバイスはできません.

投稿2017/12/05 10:37

defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defghi1977

2017/12/05 10:42

と私は考えました. とは言え実際に動いているコードを見たわけじゃないので間違っているかもしれません.
whitia

2017/12/06 10:07

なるほど、目から鱗が落ちました… おっしゃる通り難しく考えすぎていました。「入力値をフォームにセットしている処理」がどこかにあるはずだという先入観に囚われていました。 モーダル内のフォームといえど同じ画面内のパーツなのだから、普通のフォームのようにフォーカスがあっていれば入力できて当たり前ですね… 本当にありがとうございました!
defghi1977

2017/12/06 10:09

多分その後はモーダルの表示待ちかどうかのフラグを用意するとかで対処できると思います.
whitia

2017/12/06 10:09

x_xさんの > スクリプトでどこかからセットしているというよりも、単にフォーカスのある所に(ユーザーが)入力している可能性があるのではないですか? という文章も同じことを言われていたのですね… すみません、文章の意味を正しく理解できていませんでした。 x_xさんもありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問