Найкращий крос-браузерний метод для захоплення CTRL + S за допомогою JQuery?


162

Мої користувачі хотіли б мати можливість натиснути Ctrl+, Sщоб зберегти форму. Чи є хороший крос-браузерний спосіб зйомки комбінації клавіш Ctrl+ Sта подання моєї форми?

Додаток побудовано на Drupal, тому jQuery доступний.

Відповіді:


121
$(window).keypress(function(event) {
    if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) return true;
    alert("Ctrl-S pressed");
    event.preventDefault();
    return false;
});

Ключові коди можуть відрізнятися між веб-переглядачами, тому вам може знадобитися перевірити їх більше ніж 115.


5
у веб-браузерах OS X cmd + s повертає 19, тому для цього також варто перевірити. тобто якщо (! (event.which == 115 && event.ctrlKey) &&! (event.which == 19)) повернути вірно;
Tadas T

6
Для мене працює лише у Firefox. IE9 та Chrome не реєструють жодного натискання клавіш.
pelms

7
Навіть із $ (document) .keypress (замість $ (window) .keypress), IE та Chrome все ще захоплюють подію натискання клавіш "Ctrl", перш ніж це стане сценарієм.
пельмес

16
використовувати keydownзамість keypresschrome
destan

3
На жаль, він застарів
Cannicide

250

Це працює для мене (використовуючи jquery) для перевантаження Ctrl+ S, Ctrl+ Fі Ctrl+ G:

$(window).bind('keydown', function(event) {
    if (event.ctrlKey || event.metaKey) {
        switch (String.fromCharCode(event.which).toLowerCase()) {
        case 's':
            event.preventDefault();
            alert('ctrl-s');
            break;
        case 'f':
            event.preventDefault();
            alert('ctrl-f');
            break;
        case 'g':
            event.preventDefault();
            alert('ctrl-g');
            break;
        }
    }
});

8
Це єдина відповідь, яка працювала на мене у всіх перевірених браузерах, включаючи версію Chrome 28.0.1500.71
T. Brian Jones

27
Доступно для чистого JS, якщо ви використовуєте window.addEventListener(замість$(window).bind(

2
@NatesS якщо ви видалите сповіщення, воно не відкриє діалогове вікно збереження. Він викликаний через оповіщення. Для мене добре працює у всіх браузерах. Гарний спосіб подолання.
CrazyNooB

2
Працювали для мене. Будь ласка, прийміть цю відповідь, ніж вище.
pavanw3b

1
@Fireflight: анкета else ifне працюватиме, оскільки оригінальне ifтвердження вже буде оцінено як істинне. Вам доведеться поставити свій код перед початковим ifтвердженням, перетворивши оригінал в else if.
Danny Ruijters

34

Ви можете використовувати бібліотеку ярликів для обробки конкретних речей браузера.

shortcut.add("Ctrl+S",function() {
    alert("Hi there!");
});

7
Це було перетворено на плагін jQuery, роздвоєне та реформоване, і тепер підтримує 1.6.x: github.com/ricardovaleriano/jquery.hotkeys
Félix Saparelli

12
Для колег Googlers оновлена ​​URL-адреса для плагіна jQuery: github.com/jeresig/jquery.hotkeys
bgs264

29

Це рішення jQuery працює для мене в Chrome і Firefox, і для Ctrl+, Sі для Cmd+ S.

$(document).keydown(function(e) {

    var key = undefined;
    var possible = [ e.key, e.keyIdentifier, e.keyCode, e.which ];

    while (key === undefined && possible.length > 0)
    {
        key = possible.pop();
    }

    if (key && (key == '115' || key == '83' ) && (e.ctrlKey || e.metaKey) && !(e.altKey))
    {
        e.preventDefault();
        alert("Ctrl-s pressed");
        return false;
    }
    return true;
}); 

1
Це єдине рішення, яке тут працює належним чином. Дуже дякую!
Стефан Вайнхолд

1
зараз це може бути застарілим: використовувати e.keyзамість e.which;
Каніцид

Оновлено 14 травня 2017 року на сучасні стандарти.
Алан Беллоуз

28

Цей працював для мене на Chrome ... чомусь event.whichповертає велику S (83) для мене, не знаю, чому (незалежно від стану блокування шапки), тому я використовував fromCharCodeі toLowerCaseпросто бути в безпечній стороні

$(document).keydown(function(event) {

    //19 for Mac Command+S
    if (!( String.fromCharCode(event.which).toLowerCase() == 's' && event.ctrlKey) && !(event.which == 19)) return true;

    alert("Ctrl-s pressed");

    event.preventDefault();
    return false;
});

Якщо хтось знає, чому я отримую 83, а не 115 , я буду радий почути, також якщо хтось тестує це в інших браузерах, я буду радий почути, працює він чи ні


У мене така ж проблема з хромом. Такий біль!
qodeninja

ps тепер, коли я дивлюся на це, я думаю, що prevenDefault є надмірним, оскільки повернення помилкових запускає це (І stopPropagation), але не впевнений, що це має велике значення для питання
Еран Медан

7

Я поєднав декілька варіантів для підтримки FireFox, IE та Chrome. Я також оновив його для кращої підтримки mac

// simply disables save event for chrome
$(window).keypress(function (event) {
    if (!(event.which == 115 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) && !(event.which == 19)) return true;
    event.preventDefault();
    return false;
});

// used to process the cmd+s and ctrl+s events
$(document).keydown(function (event) {
     if (event.which == 83 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) {
        event.preventDefault();
        save(event);
        return false;
     }
});

5

Я б хотів, щоб веб-додатки не відміняли мої клавіші швидкого доступу за замовчуванням, якщо чесно. Ctrl+ Sвже щось робить у браузерах. Це різка зміна залежно від сайту, який я переглядаю, є руйнівним і розчаровує, не кажучи вже про часто баггі. У мене був угон сайтів Ctrl+ Tabтому, що він виглядав так само, як Ctrl+ I, і вони руйнують мою роботу над сайтом і заважають мені перемикати вкладки, як зазвичай.

Якщо ви хочете клавіші швидкого доступу, використовуйте accesskeyатрибут. Будь ласка, не порушуйте існуючу функціональність браузера.


2
Я погоджуюся цілком, але, на жаль, я реалізую пеон, а не той, хто приймає рішення.
ceejayoz

24
Щоправда, але CTRL + S не є часто використовуваною функцією. Я сумніваюся, що люди пропустили б його, особливо якщо це означає, що ви можете зберегти свій файл у своєму веб-сайті.
EndangeredMassa

13
Я звичайно погоджуюся з вами, але єдиний раз, коли я коли-небудь використовую ctrl-s у браузері, це коли я забуваю, що я використовую веб-сервер і очікую, що ярлик може зробити щось корисне. Я зазвичай розчарований. Gmail зберігає вашу електронну пошту, коли ви натискаєте ctrl-s, хоча ви ніколи не помітите, тому що, коли він просто робить те, що ви очікуєте, і те, що робить кожен додаток для настільних ПК, ви насправді не помічаєте. Ви помічаєте, коли думаєте, що хочете зберегти gmail як HTML, і це дратує.
Карсон Майєрс

4
Це дійсно залежить від програми. Я будую веб-додаток емулятора терміналу, а переопределення ctrl + c видається практичним, якщо не потрібно.
Брек

Необхідність насправді зберегти HTML-сторінку досить тонка, я вважаю, що цього ніколи не роблю. Однак, як говорили інші, веб-переглядач швидко стає місцем, де ми робимо роботу, і вся наша робота, і все більше браузерів займає місце текстових процесорів та інших програм, традиційно використовуваних на робочому столі, користувачі звикли до своєї клавіатури ярлики, тому їх підтримка є необхідною для зручності використання та прийняття. Якщо ви створите текстовий процесор і змусите мене натиснути ALT + SHIFT + S або щось гірше, я збираюся скинути ваш додаток, як погана звичка як користувача.
DavidScherer

4

@Eevee: Оскільки браузер стає домом для більшого та багатшого функціоналу та починає замінювати додатки для настільних ПК, це просто не буде можливістю відмовитися від використання комбінацій клавіш. Багатий і інтуїтивно зрозумілий набір команд клавіатури Gmail сприяв моїй готовності відмовитися від Outlook. Комбінації клавіш у Todoist, Google Reader і Google Calendar - щоденно покращують моє життя.

Розробники безумовно повинні бути обережними, щоб не перекрити натискання клавіш, які вже мають значення в браузері. Наприклад, текстове поле WMD, яке я набираю, незрозуміло інтерпретує Ctrl+ Delяк "блокчетування", а не "видалити слово вперед". Мені цікаво, чи є десь стандартний список ярликів "безпечних для браузера", якими можуть скористатися розробники сайтів, і браузери зобов'язуються триматися подалі від наступних версій.


1
Відповідь ні, немає безпечного списку ярликів, безпечних для браузера. І це добре для двох резонансів: 1. Ярлик налаштовується (принаймні в Opera). 2. Таким чином, ви не обмежуєте творчість постачальника браузера, щоб дати вам більше сил для самого використання браузера.
gizmo

3

$(document).keydown(function(e) {
    if ((e.key == 's' || e.key == 'S' ) && (e.ctrlKey || e.metaKey))
    {
        e.preventDefault();
        alert("Ctrl-s pressed");
        return false;
    }
    return true;
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try pressing ctrl+s somewhere.

Це оновлена ​​версія відповіді @ AlanBellows, яка замінює whichна key. Він також працює навіть із відключенням основного ключа Chrome (де, якщо натиснути Ctrl+, Sвін надсилає велику S замість s). Працює у всіх сучасних браузерах.


Щоб перевірити це, натисніть всередині фрагмента і натисніть Ctrl + S.
Каніцид

1

Це було моє рішення, яке читати набагато простіше, ніж інші пропозиції, може легко включати інші комбінації клавіш, і було протестовано на IE, Chrome та Firefox:

$(window).keydown(function(evt) {
    var key = String.fromCharCode(evt.keyCode);
    //ctrl+s
    if (key.toLowerCase() === "s" && evt.ctrlKey) {
        fnToRun();
        evt.preventDefault(true);
        return false;
    }
    return true;
});

1
+1 для використання String.fromCharCode. Незважаючи на те, що у Mac немає клавіші управління. Перевірте командний ключ за допомогою evt.metaKey. Він повертається trueдля Cmd на Mac та Win у Windows.
KatoFett


0

Це має працювати (адаптовано з https://stackoverflow.com/a/8285722/388902 ).

var ctrl_down = false;
var ctrl_key = 17;
var s_key = 83;

$(document).keydown(function(e) {
    if (e.keyCode == ctrl_key) ctrl_down = true;
}).keyup(function(e) {
    if (e.keyCode == ctrl_key) ctrl_down = false;
});

$(document).keydown(function(e) {
    if (ctrl_down && (e.keyCode == s_key)) {
        alert('Ctrl-s pressed');
        // Your code
        return false;
    }
}); 


0

На відповідь Алана Беллоуса:! (E.altKey) додано для користувачів, які використовують AltGrпід час введення тексту (наприклад, Польща). Без цього натискання AltGr+ Sдасть такий самий результат, як і Ctrl+S

$(document).keydown(function(e) {
if ((e.which == '115' || e.which == '83' ) && (e.ctrlKey || e.metaKey) && !(e.altKey))
{
    e.preventDefault();
    alert("Ctrl-s pressed");
    return false;
}
return true; });

0

Цей плагін, зроблений мною, може бути корисним.

Підключати

Ви можете скористатися цим плагіном, який вам належить поставити ключові коди та функцію, яку слід запускати таким чином

simulatorControl([17,83], function(){
 console.log('You have pressed Ctrl+Z');
});

У коді я показав, як виконати для Ctrl+ S. Детальну документацію ви отримаєте за посиланням. Плагін знаходиться в розділі коду JavaScript моєї ручки на Codepen.


0

Я вирішив свою проблему в IE , використовуючи a, alert("With a message")щоб запобігти поведінці за замовчуванням:

window.addEventListener("keydown", function (e) {
    if(e.ctrlKey || e.metaKey){
        e.preventDefault(); //Good browsers
        if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) { //hack for ie
            alert("Please, use the print button located on the top bar");
            return;
        }
    }
});
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.