Кнопка javascript, которая заполняет текущий ввод вместо первого
Я сделал кнопку, которая может заполнять формы с помощью 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 [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Вы можете использовать событие 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">Одним из решений может быть отслеживание ранее сфокусированного элемента 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">Надеюсь, это поможет!
вы всегда устанавливаете значение первого элемента управления вводом в своем скрипте. Вам нужен способ определить, какой ввод был последним в фокусе, прежде чем нажать кнопку автозаполнения. Возможно, вы можете добавить обработчик onfocus для каждого требуемого ввода и записать последний ввод в фокусе.
Вам нужен способ узнать, какое поле ввода в данный момент вводит пользователь. Мы можем сделать это, присоединив прослушиватели событий нажмите к отдельным текстовым полям. Как только кто-то нажимает на него, чтобы напечатать что-то, мы обновляем глобальную переменную, которая содержит ссылку на только что щелкнутый, то есть активный, объект. Сначала дайте своим текстовым полям идентификатор, чтобы мы могли их различать:
<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;
}
Это будет отслеживать фокус ввода, и при нажатии кнопки он заполнит правильный элемент управления.
// 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">Я добавил прослушиватель для события фокуса и использую один сфокусированный объект для ввода.
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">
Ele он хочет заполнить один с фокусом. Для этого ему нужно отслеживать фокус.