onkeyup будет срабатывать при каждом отпускании ключа. Хотя это выглядит как решение, у него есть некоторые проблемы.
Если пользователь перемещает курсор с помощью стрелок, он срабатывает, и вы должны проверить себя, не изменилось ли значение поля.
Если пользователь копирует / вставляет значение в поле ввода с помощью мыши или нажимает кнопку отмены / повтора в браузере, onkeyup не запускается.
Как и в Mac или в Google Docs, я не хотел, чтобы кнопка сохранения отправляла формы в нашем приложении, вот как я это делаю.
Любые комментарии или ярлыки приветствуются, так как они немного тяжелые.
- onfocus , сохранить текущее значение поля и запустить интервал для проверки изменений
- когда пользователь перемещает что-то во входных данных, происходит сравнение со старым значением, если другое значение происходит при сохранении
- onblur , когда пользователь отходит от поля, очистить интервал и обработчики событий
Вот функция, которую я использую, elm - ссылка на поле ввода, а после - функция обратного вызова, вызываемая при изменении значения:
<html>
<head>
<title>so</title>
</head>
<body>
<input type="text" onfocus="changeField(this, fldChanged);">
<script>
function changeField(elm, after){
var old, to, val,
chk = function(){
val = elm.value;
if(!old && val === elm.defaultValue){
old = val;
}else if(old !== val){
old = val;
after(elm);
}
};
chk();
to = setInterval(chk, 400);
elm.onblur = function(){
to && clearInterval(to);
elm.onblur = null;
};
};
function fldChanged(elm){
console.log('changed to:' + elm.value);
}
</script>
</body>
</html>