@rinaz22

Как отследить изменения в form?

Всем привет! Есть form с input и textarea заранее заполненными данными.
Вопрос: Как отследить изменения в этих полях? Например: если пользователь добавил 1 букву, то должен появиться текст "Не сохранено". А если он удалит эту букву, то этот текст снова должен исчезнуть.
  • Вопрос задан
  • 105 просмотров
Пригласить эксперта
Ответы на вопрос 4
@Buksirchik
Используйте событие input
Ответ написан
hzzzzl
@hzzzzl
к моему комменту выше

rinaz22, при загрузке формы в объекте сохранять "начальные значения" типа
defaultValues = {
  input_name: 'rinaz22',
  textarea_about: 'about meeee'
}


и потом в обработчике события смотреть, который инпут меняется, и сравнивать каждый раз с этим defaultValues... как-то так


https://codepen.io/anon/pen/ymOXqE

---
версия "без цикла", но я бы все же проверял все поля формы, но это уже надо поиграть потестировать
https://codepen.io/anon/pen/oKxebL?editors=1010
Ответ написан
CodeInMyHeart
@CodeInMyHeart
SOS
Примерно
let input = document.querySelector(".input");
let defaultText = input.value;

let notSavedAlert = document.querySelector(".notSavedAlert");
let saveButton = document.querySelector(".saveButton");

//нажата кнопка
input.addEventListener("keyup", checkInputText);
saveButton.addEventListener("click", saveInputText);

function checkInputText(e){
   if(input.value != defaultText){
     //функция которая выводит "не сохранено"
    notSavedAlert.style.display = "block";
    
    //выход из функции, чтобы действия ниже не выполнялись
    return false;
  }

  notSavedAlert.style.display = "none";
}

//сохранение нового текста по нажатию кнопки
function saveInputText(){
 defaultText = input.value;
}


Короче при нажатии кнопки, если текст совпадает с первоначальным текстом, то надпись скрывается, если не совпадает, показывается. По нажатию на кнопку сохранения первоначальным текстом становится текст в инпуте на данный момент. И так же делаешь с textareaa
Ответ написан
Комментировать
fallus
@fallus
Вот:
document.querySelectorAll('input').forEach(function(elm){
	elm.setAttribute('data-default-text', elm.value);
	elm.addEventListener('input', function(e){
		if(e.target.value != e.target.getAttribute('data-default-text')){
			console.log('Не совпадает!');
		}
	}, false);
})
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы