Сохранение по Ctrl+S в браузере

Могу ошибаться, но решения данной проблемы на Хабре еще не приводилось, так что позвольте поделиться с вами полезным куском кода. Задача: по нажатию Ctrl+S заблокировать браузерный диалог о сохранении страницы и запустить пользовательскую функцию.

Проблема

При редактировании данных в формах вместо прилагающейся кнопки «Сохранить» иногда так и хочется нажать привычное Ctrl+S. Это неизменно приводит к появлению стандартного браузерного диалога, который предложит вам сохранить текущую html-страницу.

С помощью JavaScript попытаемся:
* заблокировать появление диалога о сохранении;
* отловить нажатие клавиш и запустить клиентскую функцию, которая, к примеру, может запустить ajax-submit ваших данных;

Для блокирования стандартной обработки событий в браузере используются:
* Метод preventDefault() объекта event. Поддерживается в Gecko и Opera.
* Свойство returnValue объекта event, поддерживаемое в IE.

Обработчики вешаем с помощью специальной функции addHandler, чтобы не менять лишний раз HTML-код.В зависисмости от браузера блокирование производится для события keydown или keypress. После того, как диалог о сохранении будет убит, можно вызвать угодную нам функцию.

Код

// Функция для добавления обработчиков событий
function addHandler(object, event, handler, useCapture) {
if (object.addEventListener) {
object.addEventListener(event, handler, useCapture ? useCapture : false);
} else if (object.attachEvent) {
object.attachEvent('on' + event, handler);
} else alert("Add handler is not supported");
}

// Определяем браузеры
var ua = navigator.userAgent.toLowerCase();
var isIE = (ua.indexOf("msie") != -1 && ua.indexOf("opera") == -1);
var isGecko = (ua.indexOf("gecko") != -1);

// Добавляем обработчики
if (isIE) addHandler (document, "keydown", hotSave);
else addHandler (document, "keypress", hotSave);

function hotSave(evt) {
// Получаем объект event
evt = evt || window.event;
var key = evt.keyCode || evt.which;
// Определяем нажатие Ctrl+S
key = String.fromCharCode(key).toLowerCase() == "s";
if (evt.ctrlKey && key) {
// Блокируем появление диалога о сохранении
if(evt.preventDefault) evt.preventDefault();
evt.returnValue = false;
// Запускаем любую функцию, по желанию
clientFunction();
// Возвращаем фокус в окно
window.focus();
return false;
}
}
function clientFunction() {
// И тут что-то происходит...
}

Плагин для jQuery, размещенный на Google Code

Использование

Работоспособность проверена в:
* WIN: IE6, IE7;
* WIN: FF 1.5, NN 7.1, NN 8.0, Mozilla 1.7;
* WIN: Opera 7.1, 7.5, 8.0, 9.01, 9.2;
* MAC: Пишут, что по Mac OS X + FF3b5 работает (но имеено Ctrl+S, а не Command+S);

Не работает:
* в Лисе под Linux и Mac OS X при сохранении по Ctrl+Ы. Для фикса нужен патч браузера.

Приведенный выше скрипт успешно протестирован в системе редактирования баз данных Flede. Привычное нажатие Ctrl+S, и база на вашем хосте получила новые данные, а вы остались на нужной странице и пишите дальше :-)

Если скрипт не работатет в других браузерах или платформах, пишите в комментах!

Кросспост Сохранение по Ctrl+S в браузере c webew.ru