webew
Войти » Регистрация
 
JavaScript :: События

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

31 января 2008, 10:20

Задача: по нажатию 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
Добавить комментарий
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: