JavaScript скрипты
Сохранение по Ctrl+S в браузере
При работе с элементами ввода данных (текстовые поля, селекты, чекбоксы и др) вместо полагающейся кнопки "Сохранить" иногда так и хочется нажать привычное Ctrl+S. Это неизменно приводит к появлению стандартного браузерного диалога, который предложит вам сохранить текущую html-страницу.
С помощью JavaScript попытаемся:
- заблокировать появление диалога о сохранении;
- отловить нажатие клавиш и запустить клиентскую функцию;
Для блокирования стандартной обработки событий в браузере используются:
1) Метод preventDefault() объекта event. Поддерживается в Gekko и Opera.
2) Свойство returnValue объекта event, поддерживаемое в IE.
Обработчики вешаем с помощью специальной функции для их добавления.
В зависисмости от браузера блокирование производится для события 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
&& ua.indexOf("webtv") == -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() {
alert(
"Появления диалогового окна не произошло.\n"+
"Вместо этого алерта пропишите любой другой JS-код."
);
}
Проверено в (win): - IE6, IE7;
- FF 1.5, NN 7.1, NN 8.0, Mozilla 1.7;
- Opera 7.1, 7.5, 8.0, 9.01, 9.2;
Пример работы:
Нажмите Ctrl + SВсе права на статью принадлежат сайту fastcoder.org