javascript 填充当前输入而不是第一个输入的按钮

Question

我制作了一个可以用 javascript 填写表单的按钮，但它只填写页面上的第一个输入。我希望它填充闪烁的输入光标。我需要帮助。这是我的代码：

<script>
  function autoFill() {
    var input = document.getElementsByTagName("INPUT")[0]

    input.value += "only works with the first input";
  }
</script>

<input type="input">
<button type="button" onclick="autoFill()">fill it!</button>
<input type="input">

Answer 1

您可以使用事件 focus 并通过属性 Event.target 获取当前获得焦点的元素。

使用绑定事件的函数addEventListener。

let focused;
Array.from(document.querySelectorAll("input")).forEach((input) => {
  input.addEventListener('focus', function(e) {
    focused = e.target;
  });
});

document.querySelector('button').addEventListener('click', () => {
  if (focused) focused.value += "only works with the first input";
});

<input type="input">
<button type="button">fill it!</button>
<input type="input">

Answer 2

一种解决方案是通过附加状态变量（即 lastFocus，如下所示）使用 document.querySelectorAll 跟踪先前聚焦的 input[type="input"] 元素。然后，当 autoFill() 被调用时，填充 lastFocus 元素的 value 如果它存在：

let lastFocus = ''

function autoFill() {

  /* If a last focused input exists, populate it */
  if (lastFocus) {

    var input = document.querySelector('input:focus')
    lastFocus.value += "only works with the first input";
  }
}

/* Iterate each input element in document */
document.querySelectorAll('input[type="input"]').forEach(element => {

  /* Add an "on focus" listener, which sets last focused input*/
  element.addEventListener('focus', event => {
    lastFocus = element;
  });
});

<input type="input">
<button type="button" onclick="autoFill()">fill it!</button>
<input type="input">

希望对您有所帮助！

Answer 3

您总是在脚本中设置第一个输入控件的值。在单击自动填充按钮之前，您需要一种方法来确定最后聚焦的是哪个输入。也许您可以为每个需要的输入添加一个 onfocus 处理程序，并记录焦点中的最后一个输入。

Answer 4

您需要一种方法来找出用户当前正在输入的输入框。我们可以通过将 click 事件侦听器附加到各个文本框来实现。一旦有人点击它实际键入内容，我们就会更新一个全局变量，该变量包含对刚刚单击的（因此是活动的）对象的引用。首先给你的文本框一个id，这样我们就可以区分它们：

<input type="input" id="input1">
<input type="input" id="input2">

之后添加这些行：

var activeInput;
document.getElementById("input1").addEventListener("click", toggleActive);
document.getElementById("input2").addEventListener("click", toggleActive);

function autoFill() {
  activeInput.value += "only works with the first input";
}

function toggleActive(e) {
  activeInput = e.target;

}

Answer 5

这将跟踪输入焦点，当单击按钮时它将填充正确的控件。

// track current focus
let currFocus;
document.addEventListener('focusin', (e) => {
  if (e.target.nodeName.toLowerCase() === 'input') currFocus = e.target;
});

function autoFill() {
  if (currFocus) currFocus.value += "only works with the first input";
}

<input type="input">
<button type="button" onclick="autoFill()">fill it!</button>
<input type="input">

Answer 6

我为焦点事件添加了侦听器，并使用一个焦点对象进行输入。

var focused, inputs=document.getElementsByTagName('INPUT');
for(i = 0; i < inputs.length; i++) {
   
        inputs[i].addEventListener("focus", function(){
            focused = this;
        });
    
}

  function autoFill() {
    var input = document.getElementsByTagName("INPUT");
    for(i = 0; i < input.length; i++) {
      if(input[i] === focused){
           input[i].value += "auto filled";
      }
    }

    
  }

<input type="input">
<button type="button" onclick="autoFill()">fill it!</button>
<input type="input">

javascript 填充当前输入而不是第一个输入的按钮

javascript button that fills the current input instead of the first one

html

javascript

input

autofill

button