Активация/деактивация кнопки при пустом/заполненом инпуте

229
19 июля 2022, 16:40

Сделал активацию/деактивацию кнопки при заполнении инпута. После каждого нажатия кнопки, поле ввода я делаю пустым, но кнопка продолжает быть активной, пока не нажму backspace. Как решить эту пробему? Я думал что проблема в том, что после нажатия кнопки поле делается пустым

phone.value = "";

и проблема здесь, но при запуске все работает. Ломается только после нажатия кнопки.

    const phone = document.getElementById('phone');
    const list = document.createElement('ul');
    document.body.append(list);

    phone.addEventListener('keydown', function (event) {
        let input = false;

        if (event.key >= 0 || event.key === "-" || event.key === "+" || event.key <=9 || event.key === "Delete" || event.key === "Backspace" || event.key === "ArrowLeft" || event.key === "ArrowRight") {
            input = true;
        }
        if (!input) {
            event.preventDefault();
        }
        if (phone.value.length > 0) {
            button.removeAttribute('disabled')
        } else {
            button.setAttribute('disabled', 'disabled');
        }
    });

    const button = document.getElementById('button');
    button.addEventListener('click', () =>  {
        const item = document.createElement('li');
        list.append(item);
        item.textContent = phone.value;
        phone.value = ""; 
        const deletebutton = document.createElement('button');
        deletebutton.textContent = "remove";
        item.append(deletebutton);
        deletebutton.addEventListener('click', () => {
            list.removeChild(item);
        });
    });
<input type = "text" id = "phone">
<button disabled id = "button">addnumber</button>

Answer 1

Мне кажется задачу можно сделать гораздо проще:

надо отслеживать ввод текста (неважно каким способом) и если ничего не введено (это возможно в случае, когда текст стёрт), то деактивировать кнопку

let phone = document.querySelector('#phone');
phone.addEventListener('input', function(event) {
  let button = document.querySelector('#button');
  button.disabled = (phone.value == '');
});
let button = document.querySelector('#button');
button.addEventListener('click', function(event) {
  let phone = document.querySelector('#phone');
  let list = document.querySelector('#list');
  if (phone.value != '')
    list.innerHTML = phone.value + '<br>' + list.innerHTML;
  phone.value = '';
  this.disabled = true
});
<input type = "text" id = "phone">
<button disabled id = "button">addnumber</button>
<div id = 'list'></div>

READ ALSO
не открывается календарь
javascript

не открывается календарь

Заказчик хочет нативный календарь, но проблема в том, что он просто не открывается при нажатии z-index не помог в чем может быть проблема?

 328
Как проверить на JS при submit формы, что страница загружается?
javascript

Как проверить на JS при submit формы, что страница загружается?

Каким образом можно проверить, что страница в процессе загрузки после нажатия на кнопку? В моём случае documentreadyState всегда выдаёт complete

 277
Разделение объекта на несколько
javascript

Разделение объекта на несколько

Задача состоит в том чтобы разделить текста, которые в теге p

 208
Сортировка классов html+javascript
javascript

Сортировка классов html+javascript

Есть 3 кнопки (чекбоксы) и допустим 6 картинкиКак написать код так, чтобы при нажатии на 1 кнопку вылезала 1 картинка, при нажатии на 2 кнопку...

 214