Сохранение по Ctrl+S в браузере
Задача: по нажатию Ctrl+S заблокировать браузерный диалог о сохранении страницы и запустить пользовательскую функцию.
Проблема
При редактировании данных в формах вместо прилагающейся кнопки "Сохранить" иногда так и хочется нажать привычное Ctrl+S. Это неизменно приводит к появлению стандартного браузерного диалога, который предложит вам сохранить текущую html-страницу.
С помощью JavaScript попытаемся:
- заблокировать появление диалога о сохранении;
- отловить нажатие клавиш и запустить клиентскую функцию, которая, к примеру, может запустить ajax-submit ваших данных;
Для блокирования стандартной обработки событий в браузере используются:
- Метод preventDefault() объекта event. Поддерживается в Gekko и 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 = !isGecko ? (key == 83 ? 1 : 0) : (key == 115 ? 1 : 0);
if (evt.ctrlKey && key) {
// Блокируем появление диалога о сохранении
if(evt.preventDefault) evt.preventDefault();
evt.returnValue = false;
// Запускаем любую функцию, по желанию
clientFunction();
// Возвращаем фокус в окно
window.focus();
return false;
}
}
function clientFunction() {
// И тут что-то происходит...
}
Использование
Работоспособность проверена в:
- 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;
Приведенный выше скрипт успешно протестирован в системе редактирования баз данных Flede. Привычное нажатие Ctrl+S, и база на вашем хосте получила новые данные, а вы остались на нужной странице и пишите дальше :-)
Если скрипт не работатет в других браузерах или системах, пишите в комментах!
// Все права на статью JavaScript::Сохранение по Ctrl+S в браузере принадлежат сайту 2007.fastcoder.ru
