🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

HTML

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

Q&A

解決済

1回答

672閲覧

[Rails,JS]ソフトウェアキーボードで入力する際、強制的にフォーカスが切り替わる

Laugh

総合スコア11

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2021/01/09 07:50

編集2021/01/09 08:30

前提・実現したいこと

RailsとJSでソフトウェアキーボードを用いたフォーム入力を実装考案をしています。
JSでdocument.activeElementでフォーカスの当たっているフォームの要素が取得できるとのことだったので以下のように記述したのですが、二個目のフォームにフォーカスを当ててもボタンを押した際に一つ目のフォームに値が追加、変更されてしまいます。
どなたかわかる方いらっしゃいましたらご教授お願いいたします。

該当のソースコード

フォーム部分

<%= f.number_field :r_first, :placeholder => '1st', autofocus: true, class: 'form-control'%> <%= f.number_field :r_second, :placeholder => '2nd', class: 'form-control'%> <%= f.number_field :r_third, :placeholder => '3rd', class: 'form-control'%>

ソフトウェアキーボード部分

html

1<div> 2 <div> 3 <input type="button" value="1" onclick="edit(this)"> 4 <input type="button" value="2" onclick="edit(this)"> 5 <input type="button" value="3" onclick="edit(this)"> 6 <input type="button" value="4" onclick="edit(this)"> 7 <input type="button" value="5" onclick="edit(this)"> 8 </div> 9 10 <div> 11 <input type="button" value="6" onclick="edit(this)"> 12 <input type="button" value="7" onclick="edit(this)"> 13 <input type="button" value="8" onclick="edit(this)"> 14 <input type="button" value="9" onclick="edit(this)"> 15 <input type="button" value="10" onclick="edit(this)"> 16 </div> 17 18 <div> 19 <input type="button" value="11" onclick="edit(this)"> 20 <input type="button" value="12" onclick="edit(this)"> 21 <input type="button" value="13" onclick="edit(this)"> 22 <input type="button" value="14" onclick="edit(this)"> 23 <input type="button" value="15" onclick="edit(this)"> 24 </div> 25 26 <div> 27 <input type="button" value="16" onclick="edit(this)"> 28 <input type="button" value="17" onclick="edit(this)"> 29 <input type="button" value="18" onclick="edit(this)"> 30 <input type="button" value="19" onclick="edit(this)"> 31 <input type="button" value="20" onclick="edit(this)"> 32 <input type="button" value="50" onclick="edit(this)"> 33 </div> 34 35 <div> 36 <input type="button" value="double" onclick="double(this)"> 37 <input type="button" value="triple" onclick="triple(this)"> 38 </div> 39 40 </div> 41 42 <script language="javascript" type="text/javascript"> 43 var score = document.activeElement; 44 function edit(elem) { 45 score.value = score.value + elem.value; 46 } 47 function double(elem) { 48 score.value = score.value * 2; 49 } 50 function triple(elem) { 51 score.value = score.value * 3; 52 } 53 </script>

//追記
autofocusを外すと一つ目のフォームにも入力されなくなってしまうので、onclickイベントが発火された際にfocusがボタンに行ってしまうのだと考えられます。
その際にautofocusされている一つ目のフォームに強制的に入力されてしまうのではないかと…

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

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

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

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

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

guest

回答1

0

ベストアンサー

score の値はvar score = document.activeElement;が実行された時点のactiveElementです。
その後フォーカスを変えても変更されません。

なので対象が変更されたら score を更新する必要があります。

https://jsfiddle.net/56ek7c08/1/
上記ではinput=numberにフォーカスが移るとsetActiveScoreを呼び出してscoreを更新しています。

投稿2021/01/09 10:09

neko_daisuki

総合スコア2090

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

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

Laugh

2021/01/09 10:18

回答ありがとうございます! 無事onfocusオプション等々で解決に至りました! 本当に助かりました!ありがとうございます! jsの勉強にも精進していきたいと思います!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問