JQuery로 CTRL + S를 캡처하는 가장 좋은 브라우저 간 방법?

사용자가 Ctrl+ S를 눌러 양식을 저장하려고합니다. Ctrl+ S키 조합 을 캡처하고 양식을 제출 하는 브라우저 간 좋은 방법이 있습니까?

앱은 Drupal을 기반으로하기 때문에 jQuery를 사용할 수 있습니다.

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

키 코드는 브라우저마다 다를 수 있으므로 115 개 이상을 확인해야 할 수도 있습니다.

이것은 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;
        }
    }
});

바로 가기 라이브러리 를 사용하여 브라우저 별 항목을 처리 할 수 있습니다 .

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

이 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;
}); 

이것은 몇 가지 이유에 대한 ... 크롬에 나를 위해 일 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를 얻는 이유를 알고 있다면 , 기뻐할 것입니다. 다른 브라우저에서 이것을 테스트하면 작동하는지 아닌지 기뻐할 것입니다.

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;
     }
});

웹 응용 프로그램이 기본 바로 가기 키를 정직하게 무시하지 않기를 바랍니다. Ctrl+ S이미 브라우저에서 무언가를합니다. 내가보고있는 사이트에 따라 갑자기 변경되는 것은 종종 버그가있는 것은 말할 것도없고 혼란스럽고 실망스러운 일입니다. 내가 사이트를 공중 납치 했어 Ctrl+ Tab이 같은 모습 때문에 Ctrl+ I두 사이트에 내 작품을 망치고 평소대로 탭을 전환에서 저를 방지.

바로 가기 키를 원하면 accesskey속성을 사용하십시오 . 기존 브라우저 기능을 중단하지 마십시오.

@Eevee : 브라우저가 더 풍부하고 풍부한 기능의 홈이되어 데스크탑 앱을 대체하기 시작하면서 키보드 단축키 사용을 포기할 수있는 옵션은 아닙니다. Gmail의 풍부하고 직관적 인 키보드 명령은 Outlook을 기꺼이 포기하는 데 중요한 역할을했습니다. Todoist, Google Reader 및 Google 캘린더의 키보드 단축키는 모두 일상 생활을 훨씬 쉽게 만들어줍니다.

개발자는 브라우저에서 이미 의미가있는 키 입력을 무시하지 않도록주의해야합니다. 예를 들어, 입력하고있는 WMD 텍스트 상자는 Ctrl+ Del를 "단어 앞으로 삭제"가 아니라 "Blockquote"로 해석 할 수 없습니다 . 사이트 개발자가 사용할 수있는 "브라우저 안전"바로 가기의 표준 목록이 있고 브라우저가 향후 버전에서 벗어나지 않겠다고 궁금합니다.

$(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+ 를 누르면 Ss 대신 자본 S를 보냅니다). 모든 최신 브라우저에서 작동합니다.

이것은 내 솔루션으로 다른 제안보다 훨씬 읽기 쉽고 다른 키 조합을 쉽게 포함 할 수 있으며 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;
});

나는 이 작은 플러그인을 좋아 한다 . 그래도 조금 더 친숙한 브라우저가 필요합니다.

이것은 작동해야합니다 ( 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;
    }
}); 

예:

shortcut.add("Ctrl+c",function() {
    alert('Ok...');
}
,{
    'type':'keydown',
    'propagate':false,
    'target':document
});

용법

<script type="text/javascript" src="js/shortcut.js"></script>

다운로드 링크 : http://www.openjs.com/scripts/events/keyboard_shortcuts/#

Alan Bellows에게 답변 :! (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; });

내가 만든이 플러그인이 도움이 될 수 있습니다.

플러그인

이 플러그인을 사용하면 키 코드와 기능을 제공하여 다음과 같이 실행할 수 있습니다

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

코드에서 Ctrl+ 를 수행하는 방법을 표시했습니다 S. 링크에 자세한 문서가 제공됩니다. 플러그인은 Codepen에서 내 펜의 JavaScript 코드 섹션에 있습니다.

기본 동작을 방지하기 위해를 사용하여 IE 에서 내 문제를 해결했습니다 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;
        }
    }
});