单击按钮时，将注意力集中在输入框上

时间：2018-12-31 06:46:08

标签： javascript html

我有一个带有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 ...

4 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

如果您准备使用 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>

答案 2 :(得分：1)

您可以执行以下操作：

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>

答案 3 :(得分：1)

这是示例代码更新。我跟踪了最后一个专注于输入的内容，并相应地更改了文本。我猜这就是您要的。您可以编写相应的方法来控制输入字段的值。

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

相关问题
最新问题