Сохранение по 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);

    else if (object.attachEvent)

        object.attachEvent('on' + event, handler);

    else object['on' + event] = handler;

}

// Определяем браузеры

var ua = navigator.userAgent.toLowerCase();

var isIE = (ua.indexOf("msie") != -1 && ua.indexOf("opera") == -1);

var isSafari = ua.indexOf("safari") != -1;

var isGecko = (ua.indexOf("gecko") != -1 && !isSafari);

// Добавляем обработчики

if (isIE || isSafari) 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() {

    document.body.innerHTML += (new Date()).valueOf() + ": Идет сохранение...<br/>";

}

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

Демка (открой и жми Ctrl-S)

Работоспособность проверена в:

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;
WIN: Safari 3, Chrome 0.4;

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

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

Александр Бурцев 31 августа 2008

© Все права на данную статью принадлежат порталу fastcoder.org. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.

Спасибо за заметку. Александр, не подскажете, как заставить этот код работать в Safari? А то такая библиотечка корректно перехватывает CTRL+S в Safari (то есть это в принципе возможно), но как у них это сделано, так и не понял.

Ответить