前提・実現したいこと
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されている一つ目のフォームに強制的に入力されてしまうのではないかと…
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/09 10:18