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

【问题标题】：javascript button that fills the current input instead of the first one填充当前输入而不是第一个输入的 javascript 按钮
【发布时间】：2019-07-23 00:17:17
【问题描述】：

我制作了一个可以用 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">

【问题讨论】：

标签： javascript html button input autofill

【解决方案1】：

一种解决方案是使用document.querySelectorAll 通过附加状态变量（即lastFocus，如下所示）跟踪先前关注的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">

希望有帮助！

【讨论】：

【解决方案2】：

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

// 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">

【讨论】：

【解决方案3】：

您可以使用事件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">

【讨论】：

Ele 他想用焦点填充那个。为此，他需要跟踪焦点。

【解决方案4】：

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

【讨论】：

【解决方案5】：

您需要一种方法来找出用户当前正在输入的输入框。我们可以通过将 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;

}

【讨论】：

【解决方案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">

【讨论】：