Есть input type="text"
и button
. Нужно, чтобы при нажатии button, поле input type="text"
очищалось.
<input type="text" id="text1">
<button id="btn"></button>
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуОчистить значение поля ввода, либо любого другого 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: <not defined>, 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: <not defined>, 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>
Можно сделать без JS если вспомнить про type="reset"
.
<form>
<input type="text" id="text1">
<button type="reset">Очистить</button>
</form>
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>
Например еще так:
$('#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>