Кнопка JavaScript, которая заполняет текущий ввод вместо первого - PullRequest
Новая
       18

Кнопка JavaScript, которая заполняет текущий ввод вместо первого

0 голосов
/ 01 марта 2019

Я сделал кнопку, которая может заполнять формы с помощью 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">

Ответы [ 6 ]

0 голосов
/ 01 марта 2019

Я добавил слушателя для события фокуса и использовал один сфокусированный объект для ввода. 

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">
0 голосов
/ 01 марта 2019

Это будет отслеживать фокус ввода и при нажатии кнопки заполнит правильный контроль. 

// 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">
0 голосов
/ 01 марта 2019

Вам нужен способ узнать, в какое поле ввода в данный момент вводит пользователь. Мы можем сделать это, подключив click слушателей событий к отдельным текстовым полям.Как только кто-то нажимает на него, чтобы что-то набрать, мы обновляем глобальную переменную, которая содержит ссылку на только что нажатый - и, следовательно, активный - объект.Сначала дайте вашим текстовым полям идентификатор, чтобы мы могли их различать: 

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

}
0 голосов
/ 01 марта 2019

вы всегда устанавливаете значение первого элемента управления вводом в вашем скрипте.Вам нужен способ определить, какой ввод был последним в фокусе, прежде чем нажать кнопку автозаполнения.Возможно, вы можете добавить обработчик onfocus к каждому необходимому входу и записать последний вход в фокусе.

0 голосов
/ 01 марта 2019

Одним из решений будет отслеживание ранее сфокусированного элемента 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">

Надеюсь, это поможет!

0 голосов
/ 01 марта 2019

Вы можете использовать событие 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">
...