Как очистить input в javascript

как очистить input js

Как видно из кода, принцип довольно прост и заключается в присвоении пустой строки свойству value этого элемента.

Например, мы хотим очистить поле ввода для поиска музыки. Тогда наш код будет выглядеть так:

 type="text" id="searchInput" placeholder="Введите название песни или исполнителя" />  onclick="clearSearch()">Очистить function clearSearch()  document.getElementById('searchInput').value = ''; >

При нажатии на кнопку «Очистить» значение поля ввода будет заменено на пустую строку, тем самым произойдет очистка.

Очистка текстового поля ввода при нажатии кнопки

Очистить значение поля ввода, либо любого другого DOM элемента имеющего свойство value , можно просто добавив обработчик к элементу. Недостатком этого подхода, является необходимость добавления обработчика к каждому элементу и помимо этого, элемент должен существовать на момент добавления обработчика:

document.getElementById("clearButton").onclick = function(e) < // Если необходимо предотвратить/отменить событие по умолчанию, // то необходимо вызвать метод preventDefault у события // https://developer.mozilla.org/ru/docs/Web/API/Event/preventDefault // e.preventDefault(); // если необходимо также предотвратить дальнейшее "всплытие" события, // то необходимо вызвать метод stopPropagation у события // https://developer.mozilla.org/ru/docs/Web/API/Event/stopPropagation // e.stopPropagation(); document.getElementById("textInput").value = ""; >

Прямое добавление обработчика по селектору

Вместо использования id элемента, можно выбирать элементы по произвольному селектору, например по классу. Таким образом можно добавить обработчик сразу большому количеству элементов, а для передачи дополнительных параметров, можно воспользоваться data-атрибутами:

// Вместо класса можно использовать data-атрибуты: "[data-clear-button]" document.querySelectorAll(".clear-button") .forEach(function (elem) < elem.onclick = function (e) < // Если необходимо предотвратить/отменить событие по умолчанию, // то необходимо вызвать метод preventDefault у события // https://developer.mozilla.org/ru/docs/Web/API/Event/preventDefault // e.preventDefault(); // если необходимо также предотвратить дальнейшее "всплытие" события, // то необходимо вызвать метод stopPropagation у события // https://developer.mozilla.org/ru/docs/Web/API/Event/stopPropagation // e.stopPropagation(); let selector = this.dataset.clearSelector; document.querySelectorAll(selector) .forEach(function (item) < item.value = ""; >); >; >);

* < font-family: monospace; >button

  Class: alpha-input, type: text 





  Class: alpha-input nummeric-input, type: text 





  Class: nummeric-input, type: number 
  Class: <not defined>, type: date

Фильтрация событий контейнера/документа

Для работы примеров, указанных выше, необходимо наличие элементов, к которым добавляется событие. Другими словами, если элемент добавляется динамически, т.е. не существует в момент добавления обработчиков, то такой код работать не будет. Я не претендую на истину в последней инстанции, но решаю эту проблему путём добавления обработчика события на контейнер или, в крайнем случае, на документ. Таким образом можно фильтровать элементы и на основе условий, таких как имя класса, наличие определённого атрибута, либо каких-либо других, выполнять определённые действия. При таком подходе Вы можете динамически добавлять новые элементы в контейнер или документ и не беспокоиться о добавлении тривиальных обработчиков событий. Помимо этого, все обработчики будут у Вас перед глазами в разметке элемента. Нужно лишь побеспокоиться об именах классов и атрибутов:

document.onclick = function(docEvent)< let elem = docEvent.target; let isCleaner = elem.classList.contains('input-cleaner'); if(isCleaner) < // Если необходимо предотвратить/отменить событие по умолчанию, // то необходимо вызвать метод preventDefault у события // https://developer.mozilla.org/ru/docs/Web/API/Event/preventDefault // docEvent.preventDefault(); // если необходимо также предотвратить дальнейшее "всплытие" события, // то необходимо вызвать метод stopPropagation у события // https://developer.mozilla.org/ru/docs/Web/API/Event/stopPropagation // docEvent.stopPropagation(); let selector = elem.dataset.cleanerSelector; document.querySelectorAll(selector) .forEach(function (item) < item.value = ""; >); > >;

* < font-family: monospace; >button

  Class: alpha-input, type: text 





  Class: alpha-input nummeric-input, type: text 
  Class: nummeric-input, type: number 





  Class: <not defined>, type: date

Как очистить поля input нажатием кнопки после введения данных?

Добрый день! У меня есть поля input, в которых вводятся месяц и год. По нажатию кнопки строится календарь. Как сделать так, чтобы по нажатию кроме построения календаря также проихсодила и очистка введеных полей?

И сразу второй вопрос — почему, когда я «обертывать» мои инпуты в тег , код не работает, календарь не строится и ничего не происходит?

Вопрос задан более трёх лет назад
18466 просмотров

Комментировать
Решения вопроса 2

WestTrade

document.getElementById('input_month').value = ""; document.getElementById('input_year').value = "";

2. По второму вопросу не понял, у Вас элементы и так обернуты тегами и работают, можете привести пример?

Ответ написан более трёх лет назад
Нравится 1 1 комментарий
Мария @missbells Автор вопроса

Спасибо большое!
А по второму вопросу вот я чуть исправила и так у меня не работает — plnkr.co/edit/7NXHUOJ5UJyTJhd96J2Y?p=preview
Не могу понять почему и чем мешает скрипту тег form

kn1ght_t

var inputs = document.querySelectorAll('input[type=text]'); for (var i = 0; i < inputs.length; i++) < inputs[i].value = ''; >;

Как очистить input после нажатия кнопки js

Для решения этой задачи надо применить следующий алгоритм: выбрать необходимый input с помощью селекторов на странице, и установить свойство value значение пустой строки — «». Рассмотрим пример:

Исходный HTML документ

  type="text" id="text">  onClick="cleanInput();">Очистить

 type="text/javascript"> сonst cleanInput = () =>