Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Обработка нажатия Ctrl+S


Автор: Burrr 7.10.2007, 17:52
Задача, обработать нажатие Ctrl+S в браузере. Для этого необходимо отменить дефолтное действие браузера: вылезание диалога о сохранении страницы + выполнить свою функцию.
Написал следующее:
Код
    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");
    }
    addHandler (document, "keydown", hot_save);

    function hot_save(evt) {
        evt = evt || window.event;
        var key = evt.keyCode;
        if (evt.ctrlKey && evt.keyCode == 83) {
            alert("Вместо этого алерта поставьте ф-ию do_save с нужным аргументом, для сохранения без перезагрухки");
            if(event.preventDefault) event.preventDefault();
            event.returnValue = false;
            return false;
        }
    }

В ИЕ работает на ура! А вот в ФФ и Опере появление алерта сопровождается появлением браузерного окна сохранения.
Помогите, плз, пофиксить!

Автор: dstorm81 8.10.2007, 09:49
2 уважаемый Burrr
походу дела, кроссбраузерно это никак не прокатит (осел исключение из правил)
ибо
Горячие клавиши ловятся хуками системы. И выполняющиеся скрипты тут ничего не поделают. Они могут ловить нажатия и обрабатывать по-своему, но запретить их обработку приложением (в данном случае браузером) они не могут.

Автор: Burrr 8.10.2007, 10:06
dstorm81, есть пример работоспособности такого скрипта в Гекко.
В почте gmail такая фича прокатывает и в ФФ, то есть при написании письма можно нажать СTRL+S, при этом письмо сохраняется по AJAX и диалог не появляется.
Интересно, как они заблочили окно диалога. В кода гмейловой почты разбираться бесполезно, если кто не пробовал - можете попытаться.

Автор: Avb 8.10.2007, 10:42
Burrr, недавно реализовывал подобную вещь.
Пришел к такому выводу:
Чтобы иметь возможность остановить поведение браузера по умолчанию при нажатии hot keys, необходимо обработчик навешивать не с помощью  addEventListener/attachEvent, а как свойство document. Причем для ИЕ и Webkit-а - onkeydown, а для остальных - onkeypress.

Код

        if(Prototype.Browser.IE || Prototype.Browser.WebKit){
            document.onkeydown = hot_save;
        }else{
            document.onkeypress = hot_save;
        }


P.S.
Prototype.Browser.IE = !!(window.attachEvent && !window.opera);
Prototype.Browser.WebKit = navigator.userAgent.indexOf('AppleWebKit/') > -1;

P.P.S.
Я пользую: 
var key = event.keyCode || event.which;

Автор: dstorm81 8.10.2007, 12:05
только что заркгился на мыле 
пытаюсь ответить на 1 письмто то которое от  [email protected]>
нажимаю на ctrl+s выходит окно сохранения документа
мой браузер k-meleon


может пожелеешь пользователей и не будешь их лишать привычных раостей, забинди на 
ctrl+enter к примеру

Автор: Burrr 8.10.2007, 15:15
Avb, спасибо за полмощь! Пара поправок:
0) НЕ работает в Гекко :(  Фаер просто кажет диалог сохранения....
1) Моя функция добавляет обработчики событий (мало ли, а то вдруг там еще чего повесили для обработки клавиш), а document.onkeypress || document.onkeydown стирает старые, что плохо. На практике разницы между 2-мя подходами не обнаружил.

НО, зато заработало в Опере! УРА!

Пока финальный код такой:
Код
    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 IE = !!(window.attachEvent && !window.opera);
    var WebKit = navigator.userAgent.indexOf('AppleWebKit/') != -1;
    if(IE || WebKit){
          addHandler (document, "keydown", hot_save);
    }else{
          addHandler (document, "keypress", hot_save);
    }

    function hot_save(evt) {
        evt = evt || window.event;
        var key = evt.keyCode;
        if (evt.ctrlKey && evt.keyCode == 83) {
            if(event.preventDefault) event.preventDefault();
            event.returnValue = false;
            alert("Вместо этого алерта поставьте ф-ию do_save с нужным аргументом, для сохранения без перезагрухки");
            return false;
        }



dstorm81, k-meleon - какой-то КДЕшный обозреватель? Тогда не знаю работает ли там сохранение в ГМЭЙЛ. Одно скажу точно - в ФФ работает!
А насчет пользователей. Эта штука пишется для админки, где измененные данные будут уходить по AJAX-у. Для таких целей фича очень полезная...

Автор: Burrr 8.10.2007, 15:34
Решил привязать сохранение к сочетанию shift + S:
Код
    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");
    }
    
    addHandler (document, "keydown", hot_save);

    function hot_save(evt) {
        evt = evt || window.event;
        var key = evt.keyCode || event.which;
        if (evt.shiftKey && key == 83) {
            alert("Вместо этого алерта поставьте ф-ию do_save с нужным аргументом, для сохранения без перезагрузки");
            window.focus();
            return false;
        }
    }


Но если подскажите как окно сохранения заблокировать в Гекко, буду крайне благодарен!

Автор: Avb 8.10.2007, 15:50
Цитата(Burrr @  8.10.2007,  15:15 Найти цитируемый пост)
0) НЕ работает в Гекко :(  Фаер просто кажет диалог сохранения....

Возможно. Я ctrl+s не проверял.
Я использовал сочетания ctrl+1, ctrl+2 и т.д. В ФФ по умолчанию - это переключение между табами. Так вот пока я использовал addEventListener и моя функция отрабатывала, и табы переключались.
Когда сделал так как описал выше, табы переключаться перестали.

Burrr, попробуйте так как я описал. Хотя бы ради интереса. И отпишите, плиз, что получилось.

Автор: Burrr 8.10.2007, 15:55
Avb, ессно попробовал, но к сожалению без результата. Поэтому в конечном счете остановился на своем более "мягком" варианте добавления обработчика события.

Спасибо за помощь! +1

Автор: Avb 8.10.2007, 16:10
Burrr, нет уж, так легко Вы от меня не отделаетесь.  smile 
Как я уже писал, чтобы остановить стандарное поведение ФФ нужно использовать onkeypress, а он в onkeypress на нажатие s возвращает код не 83, а 115.
С кодом 115 в ФФ работает. Только что проверял.

Добавлено @ 16:12
Вот использую этот код для тестов (по-моему я его здесь на форуме и взял, немного подредактировав):
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Key Events</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
td,th{border:2px solid #aaa;}
</style>
<script type="text/javascript">
var t_cel,tc_ln;
if(document.addEventListener){ //code for Moz
document.addEventListener("keydown",keyCapt,false);
document.addEventListener("keyup",keyCapt,false);
document.addEventListener("keypress",keyCapt,false);
}else{
document.attachEvent("onkeydown",keyCapt); //code for IE
document.attachEvent("onkeyup",keyCapt);
document.attachEvent("onkeypress",keyCapt);
}
function keyCapt(e){
if(typeof window.event!="undefined"){
e=window.event;//code for IE
}
if(e.type=="keydown"){
t_cel[0].innerHTML=e.keyCode;
t_cel[3].innerHTML=e.charCode;
t_cel[6].innerHTML=e.which;
t_cel[9].innerHTML=e.ctrlKey;
}else if(e.type=="keyup"){
t_cel[1].innerHTML=e.keyCode;
t_cel[4].innerHTML=e.charCode;
t_cel[7].innerHTML=e.which;
t_cel[10].innerHTML=e.ctrlKey;
}else if(e.type=="keypress"){
t_cel[2].innerHTML=e.keyCode;
t_cel[5].innerHTML=e.charCode;
t_cel[8].innerHTML=e.which;
t_cel[11].innerHTML=e.ctrlKey;
}
}
window.onload=function(){
t_cel=document.getElementById("tblOne").getElementsByTagName("td");
tc_ln=t_cel.length;
}
</script>
</head>
<body>
<table id="tblOne">
<tr>
<th style="border:none;"></th><th>onkeydown</th><th>onkeyup</th><th>onkeypress</td>
</tr>
<tr>
<th>keyCode</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<th>charCode</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<th>e.which</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<th>ctrl</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
</table>
<button onclick="for(i=0;i<tc_ln;i++){t_cel[i].innerHTML='&nbsp;'};">CLEAR</button>
</body>
</html>

Автор: Burrr 8.10.2007, 16:58
Avb, браво!
Получилось!
Кроссбраузерный вариант (проверено в ИЕ6, ФФ1.5, НН7.1, Опера7.1, Опера9.1 - всё win):

Код
    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 isOpera = (ua.indexOf("opera") != -1); 

    if (isIE) addHandler (document, "keydown", hot_save);
    else addHandler (document, "keypress", hot_save2);

    function hot_save(evt) {
        evt = evt || window.event;
        var key = evt.keyCode || evt.which;
        key = key == 83 ? 1 : 0;
        if (evt.ctrlKey && key) {
            if(event.preventDefault) event.preventDefault();
            evt.returnValue = false;
            alert("Вместо этого алерта поставьте ф-ию do_save с нужным аргументом, для сохранения без перезагрухки");
            window.focus();
            return false;
        }
    }
    
    function hot_save2(evt) {
        evt = evt || window.event;
        var key = evt.keyCode || evt.which;
        key = isOpera ? (key == 83 ? 1 : 0) : (key == 115 ? 1 : 0);
        if (evt.ctrlKey && key) {
            if(evt.preventDefault) evt.preventDefault();
            evt.returnValue = false;
            alert("Вместо этого алерта поставьте ф-ию do_save с нужным аргументом, для сохранения без перезагрухки");
            window.focus();
            return false;
        }
    }


Спасибо тебе огромное, человечище!  smile 
Если не сложно - проверьте под МАКом и Линуксом...

Автор: Avb 8.10.2007, 17:04
Цитата(Burrr @  8.10.2007,  16:58 Найти цитируемый пост)
Получилось!

Вот! Другое дело!

Цитата(Burrr @  8.10.2007,  16:58 Найти цитируемый пост)
Спасибо тебе огромное, человечище!   

Всегда рад.

Автор: Burrr 9.10.2007, 12:15
Вот что получилось в итоге (вычищенный код):
http://fastcoder.org/javascript/36.html

Автор: Fubu_By 21.11.2007, 21:49
а как отключить кнопку "просмотр исходного кода"?

Автор: Egor__ 5.12.2007, 13:14
подскажите почему не работают обработчики для IE : 
<input name="e"  type="button" value="вызов addEventListener"  
onmouseover="status='Переход к карте сайта' return true;" onmouseout="status='false'; return false;">

исходный:
 
<form name="m">
<input name="e"  type="button" value="вызов addEventListener"  > Для оперы <p></p>
<input name="e"  type="button" value="вызов addEventListener"  
onmouseover="status='Переход к карте сайта' return true;" onmouseout="status='false'; return false;"> Для  IE <p></p>

</form>



<script>

function w(){status='Переход к карте сайта'; return true;}
function q(){status='false'; return true;}

m=document.m;
m.addEventListener("mouseover", w, true);
m.removeEventListener("mouseout", q, true);

</script>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)