VPF::Обработка нажатия Ctrl+S - Форум программистов

Burrr

Дата 7.10.2007, 17:52 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 4.9.2005

Репутация: 10
Всего: 20

Задача, обработать нажатие 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;
        }
    }

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

--------------------

JavaScript на fastcoder, sqlinfo.ru

dstorm81

Дата 8.10.2007, 09:49 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

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

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

Burrr

Дата 8.10.2007, 10:06 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 4.9.2005

Репутация: 10
Всего: 20

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

--------------------

JavaScript на fastcoder, sqlinfo.ru

Avb

Дата 8.10.2007, 10:42 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 5.7.2006

Репутация: 4
Всего: 13

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;

Это сообщение отредактировал(а) Avb - 8.10.2007, 10:47

dstorm81

Дата 8.10.2007, 12:05 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

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

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

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

Burrr

Дата 8.10.2007, 15:15 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 4.9.2005

Репутация: 10
Всего: 20

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-у. Для таких целей фича очень полезная...

--------------------

JavaScript на fastcoder, sqlinfo.ru

Burrr

Дата 8.10.2007, 15:34 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 4.9.2005

Репутация: 10
Всего: 20

Решил привязать сохранение к сочетанию 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;
        }
    }

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

Это сообщение отредактировал(а) Burrr - 8.10.2007, 15:40

--------------------

JavaScript на fastcoder, sqlinfo.ru

Avb

Дата 8.10.2007, 15:50 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 5.7.2006

Репутация: 4
Всего: 13

Цитата(Burrr @ 8.10.2007, 15:15

)

0) НЕ работает в Гекко :( Фаер просто кажет диалог сохранения....

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

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

Burrr

Дата 8.10.2007, 15:55 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 4.9.2005

Репутация: 10
Всего: 20

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

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

--------------------

JavaScript на fastcoder, sqlinfo.ru

Avb

Дата 8.10.2007, 16:10 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 5.7.2006

Репутация: 4
Всего: 13

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>

Это сообщение отредактировал(а) Avb - 8.10.2007, 16:13

Burrr

Дата 8.10.2007, 16:58 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 4.9.2005

Репутация: 10
Всего: 20

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

Если не сложно - проверьте под МАКом и Линуксом...

--------------------

JavaScript на fastcoder, sqlinfo.ru

Avb

Дата 8.10.2007, 17:04 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 5.7.2006

Репутация: 4
Всего: 13

Цитата(Burrr @ 8.10.2007, 16:58

)

Получилось!

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

Цитата(Burrr @ 8.10.2007, 16:58

)

Спасибо тебе огромное, человечище!

Всегда рад.

Burrr

Дата 9.10.2007, 12:15 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 4.9.2005

Репутация: 10
Всего: 20

Вот что получилось в итоге (вычищенный код):
Сохранение по Ctrl+S в браузере

--------------------

JavaScript на fastcoder, sqlinfo.ru

Fubu_By

Дата 21.11.2007, 21:49 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 290
Регистрация: 14.2.2007

Репутация: нет
Всего: 0

а как отключить кнопку "просмотр исходного кода"?

--------------------

MobiAppSystems

Egor__

Дата 5.12.2007, 13:14 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 4.10.2006

Репутация: нет
Всего: нет

подскажите почему не работают обработчики для 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>

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »