Keep focus on input box when click on button

Question

I have a simple calculator with 2 inputs, and when I click on button I want to check if one of inputs is focused and if yes to enter that number.

But when I click on button I lose focus on inputs and get it on that button.

 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> 

I am not using any framework, just JS...

Answer 1

This is just a working sample of the suggestion given by Teemu. So credit there. We add a focus event to our input controls and record the last focused control.

 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

If you are ready to use Jquery , then you can try this code

 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

You can do something like this:

 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

This is sample code update. I have kept a track of the last focused on input and changed the text accordingly. I am guessing this is what you asked for. You can write the methods to control the value of the input fields accordingly.

 <!-- 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>