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

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

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 2

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

6 个答案: