как очистить input js
Как видно из кода, принцип довольно прост и заключается в присвоении пустой строки свойству value этого элемента.
Например, мы хотим очистить поле ввода для поиска музыки. Тогда наш код будет выглядеть так:
type="text" id="searchInput" placeholder="Введите название песни или исполнителя" /> onclick="clearSearch()">Очистить function clearSearch() document.getElementById('searchInput').value = ''; > При нажатии на кнопку «Очистить» значение поля ввода будет заменено на пустую строку, тем самым произойдет очистка.
Библиотека Интернет Индустрии I2R.ru
Для очистки формы существует специальная кнопка Reset, при нажатии на которую данные формы возвращаются в исходное значение. Если ввести свои данные в форму, а затем нажать на такую кнопку, то все введенные данные вернутся в первоначальное значение, которое было до ввода пользователя. Поэтому с позиции удобства кнопка Reset приносит лишь вред, ведь можно случайно нажать на нее и обнулить результаты ввода. Тем не менее, иногда возникает задача очистки формы посредством JavaScript. Для этого используется метод reset , он применяется следующим образом (пример 1).
Пример 1. Использование метода reset
document.forms[«имя формы»].reset() или
document.forms.имя формы.reset()
Рассмотрим следующую задачу, где очистка формы может весьма пригодиться. Для сайта, преимущественно состоящего из статей, полезным добавлением может послужить форма написания пользовательского комментария. Здесь существует два основных подхода.
В первом случае, после ввода текста и нажатия на кнопку Submit, данные отправляются на сервер. Затем текущая страница перезагружается в браузере, появляется опять та же статья, но уже с добавленным комментарием, обычно внизу страницы. Чем больше добавлено комментариев, тем медленнее загружается документ и тем больше времени приходиться ожидать при добавлении нового.
Во втором случае, после отправки формы комментария на сервер, открывается новое окно, в котором запускается программа-обработчик данных и сообщается, что текст добавлен (или не добавлен и почему). Автоматической перезагрузки страницы не происходит, чтобы убедиться, что с комментарием все в порядке, можно сделать это . При этом форма самостоятельно не очищается, а это может сбить пользователя с толку. Ведь он будет лишний раз себе ломать голову, получилось у него или нет отправить комментарий на сервер. Вот тут как раз и пригодится очистка формы с помощью JavaScript.
Достоинства и недостатки присущи каждому подходу, здесь мы не будем вдаваться в подробности и разбирать их. Попробуем лучше применить метод reset на практике, используя второй описанный подход для добавления комментария.
Для создания нового окна воспользуемся методом window.open, который позволяет управлять отображением параметров окна. В частности, зададим у него жесткий размер 400 на 300 пикселей, уберем меню, полосы прокрутки и строку состояния. Важно дать новому окну какое-нибудь имя, чтобы иметь возможность выводить текст в данном окне, а не текущем. В примере окно именуется popmsg.
Воспользуемся тем, что тег FORM имеет параметр target, он работает аналогично параметру у фреймов, а именно, загружает результат выполнения серверной программы, указанной в параметре action, в заданное окно или фрейм. Указав значение target=popmsg , мы перенаправляем вывод в новое окно с именем popmsg, созданное при помощи JavaScript.
При отправке формы на сервер генерируется событие onSubmit, на которое мы свою функцию popupMsg. Эта функция проверяет, все ли данные введены и в случае успеха создает новое окно с именем popmsg, куда загружается результат выполнения серверной программы. После чего форма комментария очищается методом reset (пример 2).
Пример 2. Применение очистки формы
// Вначале проверяем данные на корректность.
window.open(«», » popmsg «, «width=400, height=300, status=0, menubar=0, location=0 resizable=0 directories=0 toolbar=0»)
f.submit()
f.reset()
> else alert(«Не указаны следующие данные:\n» + msg)
| Имя | |
| Комментарий | |
Для удобства, при вызове функции popupMsg используется ключевое слово this, оно позволяет обращаться к форме через аргумент f, указывающий на форму.
Курсы javascript
Добрый день, стоит задача очистить форму input, если пользователь заполняет вход, но нажимает его снова, он стирается
Знаю как реализовать данную задачу через редактирование input.
function clearField(input) < input.value = ""; >;
И нужно только что бы поле input, стиралось у #edit-field-iblako-slov-tid, само поле редактировать не могу.
18.09.2021, 21:45
Интересующийся
Регистрация: 20.07.2018
Сообщений: 17
Как решение есть такое:
18.09.2021, 21:48
Регистрация: 27.05.2010
Сообщений: 33,031
ajaxst,
. подожду переводчика
19.09.2021, 13:19
Интересующийся
Регистрация: 20.07.2018
Сообщений: 17
Перевод:
поле input пустое, пользователь вводит данные, запускает поиск и все нормально, значения в поле сохраняют свое значение, после ввода нового значение в это же поле, при первом нажатии значение сразу же удаляется (очищается) и ему не нужно механически (нажатием клавиш) ничего удалять.
19.09.2021, 16:30
Регистрация: 27.05.2010
Сообщений: 33,031
ajaxst,
нужно найти функцию вывода результатов поиска и в неё добавить «стирание», либо на кнопку отправки данных, ставить таймер который сотрёт данные через минуту например.
Очистка формы с помощью js.
После отправки формы, она заполняется данными, которые ввел пользователь.
Из-за того, что страница обновляется с уже готовыми данными, форма по кнопке не очищается.
Как реализовать очищение формы?
function clearForm()
Не помогает. Обновление Я вешаю функцию на событие onclick при нажатии на кнопку очистки.
$('form input[type="text"], form input[type="password"], form textarea').val(''); не срабатывает так же. Я не хочу чистить форму автоматически, мне нужно, чтобы это делал пользователь.
Отслеживать
28.8k 12 12 золотых знаков 59 59 серебряных знаков 118 118 бронзовых знаков