JS-мастера, как остановить reset у input'а при нажатие ESC?

Question

[aTei]

Есть инпут со значением «4», меняем значение на «5», через JS по нажатию на button. Потом нажимаем ESC, значение возвращается на 4.

Пробовал e.preventDefault() по keydown, как на самом элементе, так и на window.

Если изменить значение используя клавиатуру — ESC reset не делает.

Наткнулся на stackoverflow, что браузер должен получить onchange, тогда ESC не будет делать reset, но $('input').trigger('change') тоже не помог.

Comments

[creage]

покажите код на jsFiddle

[aTei]

Пример jsfiddle.net/nbEZA/

Answer 1

[Павел Тысляцкий]

У меня заработал сл код jsfiddle.net/nbEZA/3/
Здесь возвращается фокус только после того как значение было задано по нажатию на спан.
Я вижу происходящее у Вас так:
onmousedown — снимаем фокус с input
onclick — вызываем обработчик, повешенный на span
$('#input').focus(); — переводил фокус обратно (зачем перед изменением, тк потом все равно повторяется?)
$('#input').val('42'); — изменяет значение input (без onchange события)
$('#input').focus(); — переводил фокус обратно, но если фокус уже на элементе, то получаем возможность отменить по esc, тк фокус не менялся, а значение поменялось без onchange (но почему так не скажу)

Comments

[aTei]

В целом код на 200 строчек и как раз убрать focus() перед сменой значения помогло.

Answer 2

[Genome_X]

Гм, а кто вам мешает получить значение лежащее в инпуте ДО его изменения, сохранить его в некоторую переменную, и потом, при нажатии ESC (т.е. средствами JS отслеживая нажатие клавиши с этим кодом), просто возвращать в инпут предыдущее значение? Эффект будет точно таким же. Я в одном своем проекте (это было типа тестового задания) делал подобным образом. Причем, я предусмотрел несколько активных инпутов, у которых нужно было вернуть старое значение.
Так что попробуйте так, будет полная аналогия с обычным ресетом.

Comments

[aTei]

Сейчас так и реализовал, но проблема — видно, как значение прыгает на предыдущее и только потом восстанавливается сохраненное. Пробовал отлавливать по keydown, но тогда значение вообще не восстанавливается.

[Genome_X]

не совсем понял, что вы подразумеваете под «видно как значение прыгает на предыдущее». Keydown вообще прекрасно должен работать, может вы обработчик некорректно вешаете?

[aTei]

К сожалению, с ESC он работает не прекрасно :(
И, с учетом reset'a, следующий код не восстановит значение из data-before:
$('input').on('keydown', function(e){
if(e.keyCode === keys.ESC){
$(this).val($(this).data('before'));
}
});

[Genome_X]

Попробуйте вместо keys.ESC поставить просто 27

[Genome_X]

Ну и да, on у вас поддерживается вашей версией jQuery? Можно как вариант вместо on поставить 'keydown', а в скобках его, естественно убрать.

[aTei]

На глупые ошибки я код проверял и все известные мне способы проверил, потому и задал вопрос на хабре.

Answer 3

[Vitaliy Petrychuk]

jsfiddle.net/nbEZA/4/