2

Есть input type="text" и button. Нужно, чтобы при нажатии button, поле input type="text" очищалось.

<input type="text" id="text1">
<button id="btn"></button>

4 ответа 4

13

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

Очистить значение поля ввода, либо любого другого 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 = "";
}
<input id="textInput" type="text" value="abcdefgh" placeholder="Input any string value" />
<button id="clearButton">Clear</button>


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

Вместо использования 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 {
  width: 225px;
}
<p>
  <input type="text" class="alpha-input" id="text1" value="abcdefg" />
  <span>Class: alpha-input, type: text</span>
</p>
<p>
  <input type="text" class="alpha-input nummeric-input" id="text2" value="xyz1232" />
  <span>Class: alpha-input nummeric-input, type: text</span>
</p>
<p>
  <input type="number" class="nummeric-input" id="numberInput" value="1232456" />
  <span>Class: nummeric-input, type: number</span>
</p>
<p>
  <input type="date" id="dateInput" value="1991-01-01" />
  <span>Class: &lt;not defined&gt;, type: date</span>
</p>
<p>
  <button class="clear-button" data-clear-selector="input.alpha-input">
    Clear "input.alpha-input"
  </button>
</p>
<p>
  <button class="clear-button" data-clear-selector="input.nummeric-input">
    Clear "input.nummeric-input"
  </button>
</p>
<p>
  <button class="clear-button" data-clear-selector="input[type='date']">
    Clear "input[type='date']"
  </button>
</p>
<p>
  <button class="clear-button" data-clear-selector="input">
    Clear all inputs
  </button>
</p>


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

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

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 {
  width: 225px;
}
<p>
  <input type="text" class="alpha-input" id="text1" value="abcdefg" />
  <span>Class: alpha-input, type: text</span>
</p>
<p>
  <input type="text" class="alpha-input nummeric-input" id="text2" value="xyz1232" />
  <span>Class: alpha-input nummeric-input, type: text</span>
</p>
<p>
  <input type="number" class="nummeric-input" id="numberInput" value="1232456" />
  <span>Class: nummeric-input, type: number</span>
</p>
<p>
  <input type="date" id="dateInput" value="1991-01-01" />
  <span>Class: &lt;not defined&gt;, type: date</span>
</p>
<p>
  <button class="inputs-cleaner" data-cleaner-selector="input.alpha-input">
    Clear "input.alpha-input"
  </button>
</p>
<p>
  <button class="inputs-cleaner" data-cleaner-selector="input.nummeric-input">
    Clear "input.nummeric-input"
  </button>
</p>
<p>
  <button class="inputs-cleaner" data-cleaner-selector="input[type='date']">
    Clear "input[type='date']"
  </button>
</p>
<p>
  <button class="inputs-cleaner" data-cleaner-selector="input">
    Clear all inputs
  </button>
</p>

1
  • Я бы еще добавил, что нужно в кнопке прописать атрибут type="button", так как по умолчанию она type="submit" и при нажатии будет пытаться отправить форму.
    – Artem
    4 окт 2020 в 12:31
7

Можно сделать без JS если вспомнить про type="reset".

<form>
    <input type="text" id="text1">
    <button type="reset">Очистить</button>
</form>

3
  • В этом случае очистятся все поля в форме.
    – XelaNimed
    5 сен 2016 в 12:39
  • Лучше так не делать, если это не формы авторизации или регистрации, либо какой-нибудь заявки.
    – user192664
    5 сен 2016 в 12:39
  • Да, этот вариант не подходит.
    – A.Hall
    5 сен 2016 в 12:41
1

var buttons = document.getElementsByClassName("forclear");
for (var i in buttons) {
  if (buttons[i].addEventListener) {
    buttons[i].addEventListener('click', function(e){
      this.previousElementSibling.value = "";
    });
  }
}
<div>
  <input type="text" value="123" />
  <button class="forclear">Clear</button>
  <input type="text" value="456" />
  <button class="forclear">Clear</button>
</div>

2
  • Ваше решение зависит от местоположения элементов в DOM, что может не работать при наличии каких-либо других элементов перед кнопкой.
    – XelaNimed
    28 мар 2018 в 9:58
  • @XelaNimed, решен частный случай нужный автору вопроса. Я в курсе, как код представленный в моем ответе работает ;)
    – Visman
    28 мар 2018 в 13:34
1

Например еще так:

$('#btn').on('click', function(e){
  e.preventDefault();
  
  var val = $('#text1').val();
  
  if(val.length >= 1){
    $('#text1').val('');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="text1">
    <button id="btn">Очистить</button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.