單擊按鈕時，將注意力集中在輸入框上

Question

我有一個帶有2個輸入的簡單計算器，當我單擊按鈕時，我想檢查輸入中的一個是否聚焦，如果是則輸入該數字。

但是，當我單擊按鈕時，我會失去對輸入的關注，而將其放在該按鈕上。

 let activeElement = document.activeElement; function numClick(number){ console.log("Num clicked=" + number); let tempNumber=""; tempNumber = activeElement.value; tempNumber = tempNumber + number; activeElement.value=tempNumber; } 

 <input id = "num1" type="text" name="num1" value=""> <span id="operacija"></span> <input id = "num2" type="text" name="num2" value=""> <span>=</span> <span id="rezultat">0</span> <br><br> <input type="button" onclick="clearIt() "value="C"> <input type="button" onclick="operationClick('/')"value="/"> <br> <input type="button" onclick="numClick(7)" value="7"> <input type="button" onclick="numClick(8)" value="8"> <input type="button" onclick="numClick(9)" value="9"> <input type="button" onclick="operationClick('*')"value="*"> <br> <input type="button" onclick="numClick(4)" value="4"> <input type="button" onclick="numClick(5)" value="5"> <input type="button" onclick="numClick(6)" value="6"> <input type="button" onclick="operationClick('-')"value="-"> <br> <input type="button" onclick="numClick(1)" value="1"> <input type="button" onclick="numClick(2)" value="2"> <input type="button" onclick="numClick(3)" value="3"> <input type="button" onclick="operationClick('+')" value="+"> <br> <input type="button" onclick="numClick(0)" value="0"> <input type="button" onclick="calculate()" value="="> <br> <script type="text/javascript" src="zadatak1.js"></script> 

我沒有使用任何框架，只有JS ...

Answer 1

這只是Teemu提出的建議的一個工作樣本。 所以在那兒功勞。 我們將焦點事件添加到輸入控件中，並記錄最后一個focused控件。

 document.addEventListener('DOMContentLoaded', function() { document.querySelector('#num1').addEventListener('focus', setLastElement); document.querySelector('#num2').addEventListener('focus', setLastElement); }); var lastInputElement; const setLastElement = (event) => { lastInputElement = event.target; console.log(event.target); }; let activeElement = document.activeElement; function numClick(number){ if (lastInputElement === undefined) return; console.log("Num clicked=" + number); let tempNumber=""; tempNumber = lastInputElement.value; tempNumber = tempNumber + number; activeElement.value=tempNumber; } 

 <input id = "num1" type="text" name="num1" value=""> <span id="operacija"></span> <input id = "num2" type="text" name="num2" value=""> <span>=</span> <span id="rezultat">0</span> <br><br> <input type="button" onclick="clearIt() "value="C"> <input type="button" onclick="operationClick('/')"value="/"> <br> <input type="button" onclick="numClick(7)" value="7"> <input type="button" onclick="numClick(8)" value="8"> <input type="button" onclick="numClick(9)" value="9"> <input type="button" onclick="operationClick('*')"value="*"> <br> <input type="button" onclick="numClick(4)" value="4"> <input type="button" onclick="numClick(5)" value="5"> <input type="button" onclick="numClick(6)" value="6"> <input type="button" onclick="operationClick('-')"value="-"> <br> <input type="button" onclick="numClick(1)" value="1"> <input type="button" onclick="numClick(2)" value="2"> <input type="button" onclick="numClick(3)" value="3"> <input type="button" onclick="operationClick('+')" value="+"> <br> <input type="button" onclick="numClick(0)" value="0"> <input type="button" onclick="calculate()" value="="> <br> <script type="text/javascript" src="zadatak1.js"></script> 

Answer 2

如果您准備使用Jquery ，則可以嘗試以下代碼

 let activeElement = document.activeElement; var prevFocus; $('input[type="text"]').focus(function() { prevFocus = $(this); }); function numClick(number){ console.log("Num clicked=" + number); let tempNumber=""; tempNumber = activeElement.value; tempNumber = tempNumber + number; activeElement.value=tempNumber; number= prevFocus.val() +''+ number prevFocus.val(number) prevFocus.focus() } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id = "num1" type="text" name="num1" value=""> <span id="operacija"></span> <input id = "num2" type="text" name="num2" value=""> <span>=</span> <span id="rezultat">0</span> <br><br> <input type="button" onclick="clearIt() "value="C"> <input type="button" onclick="operationClick('/')"value="/"> <br> <input type="button" onclick="numClick(7)" value="7"> <input type="button" onclick="numClick(8)" value="8"> <input type="button" onclick="numClick(9)" value="9"> <input type="button" onclick="operationClick('*')"value="*"> <br> <input type="button" onclick="numClick(4)" value="4"> <input type="button" onclick="numClick(5)" value="5"> <input type="button" onclick="numClick(6)" value="6"> <input type="button" onclick="operationClick('-')"value="-"> <br> <input type="button" onclick="numClick(1)" value="1"> <input type="button" onclick="numClick(2)" value="2"> <input type="button" onclick="numClick(3)" value="3"> <input type="button" onclick="operationClick('+')" value="+"> <br> <input type="button" onclick="numClick(0)" value="0"> <input type="button" onclick="calculate()" value="="> <br> 

Answer 3

您可以執行以下操作：

 var activeInput = "" function inputClick(input){ activeInput = input; } function numClick(number){ document.getElementById(activeInput).value += number; } 

 <input id="num1" type="text" name="num1" value="" onclick=inputClick('num1')> <span id="operacija"></span> <input id="num2" type="text" name="num2" value="" onclick=inputClick('num2')> <span>=</span> <span id="rezultat">0</span> <br><br> <input type="button" onclick="clearIt() "value="C"> <input type="button" onclick="operationClick('/')"value="/"> <br> <input type="button" onclick="numClick(7)" value="7"> <input type="button" onclick="numClick(8)" value="8"> <input type="button" onclick="numClick(9)" value="9"> <input type="button" onclick="operationClick('*')"value="*"> <br> <input type="button" onclick="numClick(4)" value="4"> <input type="button" onclick="numClick(5)" value="5"> <input type="button" onclick="numClick(6)" value="6"> <input type="button" onclick="operationClick('-')"value="-"> <br> <input type="button" onclick="numClick(1)" value="1"> <input type="button" onclick="numClick(2)" value="2"> <input type="button" onclick="numClick(3)" value="3"> <input type="button" onclick="operationClick('+')" value="+"> <br> <input type="button" onclick="numClick(0)" value="0"> <input type="button" onclick="calculate()" value="="> <br> 

Answer 4

這是示例代碼更新。 我跟蹤了最后一個專注於輸入的內容，並相應地更改了文本。 我猜這就是您要的。 您可以編寫相應的方法來控制輸入字段的值。

 <!-- Added an extra method to remember the last focus, we pass the element as the function param: --> <input id="num1" type="text" name="num1" value="" onclick='updateFocus(num1)'> <span id="operacija"></span> <input id="num2" type="text" name="num2" value="" onclick='updateFocus(num2)'> <span>=</span> <span id="rezultat">0</span> <br><br> <input type="button" onclick="clearIt() " value="C"> <input type="button" onclick="operationClick('/')" value="/"> <br> <input type="button" onclick="numClick(7)" value="7"> <input type="button" onclick="numClick(8)" value="8"> <input type="button" onclick="numClick(9)" value="9"> <input type="button" onclick="operationClick('*')" value="*"> <br> <input type="button" onclick="numClick(4)" value="4"> <input type="button" onclick="numClick(5)" value="5"> <input type="button" onclick="numClick(6)" value="6"> <input type="button" onclick="operationClick('-')" value="-"> <br> <input type="button" onclick="numClick(1)" value="1"> <input type="button" onclick="numClick(2)" value="2"> <input type="button" onclick="numClick(3)" value="3"> <input type="button" onclick="operationClick('+')" value="+"> <br> <input type="button" onclick="numClick(0)" value="0"> <input type="button" onclick="calculate()" value="="> <br> <script> var activeElement; // Updating the current focused on input field: function updateFocus(input) { activeElement = input; console.log("The active element is: +" + activeElement); } // Ensuring the number sent on click event is added to the current input box. function numClick(number) { // If a button pressed before focusing on any of the inputs: if (activeElement == null) return; console.log("Num clicked: " + number); var tempText = activeElement.value; tempText += number; activeElement.value = tempText; } </script>