JQuery로 CTRL+S를 캡처하는 최고의 크로스 브라우저 방법은 무엇입니까?

JQuery로 CTRL+S를 캡처하는 최고의 크로스 브라우저 방법은 무엇입니까?

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

앱은 드루팔을 기반으로 구축되어 있어 jQuery를 이용할 수 있습니다.

이것은 (jquery를 사용하여) +,SF +, 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;
        }
    }
});

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

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

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

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

이 jQuery 솔루션은 Chrome과 Firefox에서 +와 S+ 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 S(83)는 대문자 S(83)를 반환합니다. 그 이유는 (상태에 ) 알 수 에 저는 반를니 S()를 사용했습니다. 이유를 확실하지 않습니다(캡스 잠금 상태와 상관없이). 그래서 사용했습니다.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;
});

내가 115가 아닌 83을 받는 이유를 아는 사람이 있다면, 나는 기꺼이 들을 것이고, 만약 누군가가 다른 브라우저에서 이것을 테스트한다면 나는 그것이 작동하는지 아닌지를 기꺼이 들을 것입니다.

FireFox, IE 및 Chrome을 지원하기 위해 몇 가지 옵션을 결합했습니다.나는 또한 맥을 더 잘 지원하도록 업데이트했습니다.

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

$(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의 자본 키 결함(+S를 누르면 s 대신 자본 S를 전송함)에서도 작동합니다.모든 최신 브라우저에서 작동합니다.

솔직히 저는 웹 애플리케이션이 제 기본 바로 가기 키를 무시하지 않기를 바랍니다.S + 이미 브라우저에서 무언가를 수행하고 있습니다.제가 보고 있는 사이트에 따라 갑작스럽게 변경을 하는 것은 종종 버그가 발생하는 것은 말할 것도 없고, 방해가 되고 좌절감을 줍니다.저는 I+와 똑같이 생겼기 때문에 + 사이트를 Tab가로채서 사이트 작업을 망치고 평소처럼 탭을 전환하지 못하게 했습니다.

가기 키를 하려면 바가키사면려하를 합니다.accesskey을 손상시키지 기존 브라우저 기능을 손상시키지 마십시오.

@Eveee: 브라우저가 점점 더 풍부한 기능을 제공하고 데스크톱 앱을 대체하기 시작하면서 키보드 단축키 사용을 포기하는 옵션이 되지 않을 것입니다.Gmail의 풍부하고 직관적인 키보드 명령 집합은 Outlook을 포기하려는 제 의지에 도움이 되었습니다.ToDoist, Google Reader 및 Google Calendar의 바로 가기 키를 사용하면 일상생활이 훨씬 더 쉬워집니다.

개발자는 브라우저에 이미 의미가 있는 키 입력을 무시하지 않도록 확실히 주의해야 합니다.예를 들어, 제가 입력하는 WMD 텍스트 상자는 +를 "앞으로 단어 삭제"가 아닌 "인용 차단"으로 설명합니다.Del사이트 개발자들이 사용할 수 있는 "브라우저 안전" 바로 가기의 표준 목록이 있는지 궁금하고, 브라우저들이 향후 버전에서 멀리하기로 약속할 것입니다.

Alan Bellows에게 대답하기: !(e.altKey)는 입력할 때 사용하는 사용자를 위해 추가되었습니다(예: 폴란드).이렇게 하지 않으면 +를 S누르면 +와 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; });

저는 이 작은 플러그인을 좋아합니다.하지만 브라우저 간의 친화성이 조금 더 필요합니다.

이것은 작동할 것입니다(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/ #

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

플러그인

당신은 이 플러그인을 사용할 수 있습니다. 당신은 다음과 같이 실행될 키 코드와 기능을 제공해야 합니다.

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

코드에서 +S에 대한 수행 방법을 표시했습니다.링크에서 자세한 설명서를 확인할 수 있습니다.플러그인이 코드펜의 내 펜의 자바스크립트 코드 섹션에 있습니다.

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

이 솔루션은 여기 있는 다른 제안보다 훨씬 읽기 쉽고 다른 키 조합을 쉽게 포함할 수 있으며 IE, Chrome 및 Firefox에서 테스트되었습니다.

$(window).keydown(function(evt) {
  var key = String.fromCharCode(evt.keyCode).toLowerCase();
  switch(key) {
    case "s":
      if(evt.ctrlKey || evt.metaKey) {
        fnToRun();
        evt.preventDefault(true);
        return false;
      }
      break;
  }
  return true;
});

이 스레드에 있는 많은 답변이 언급e.which또는e.Keycode현재 MDN 및 https://keyjs.dev/에 따라 권장되지 않습니다.게다가, 가장 많이 평가된 답변은 사용으로 이어지는 다른 단축키도 가져오기 때문에 약간 지나쳐 보입니다.switch타사 라이브러리를 확인하지는 않았지만 항상 타사 라이브러리를 최대한 적게 사용하려고 합니다.

다음은 제 솔루션입니다(질문에서 jQuery를 언급했으므로).

$(document).keydown(function(e) {
    if (e.ctrlKey && e.key == "s" || e.metaKey && e.key == "s") {
        myFunction();
        e.preventDefault();
    }
});

그e.metaKeyMac 장치 때문에 여기에 있습니다.

그myFunction();라인은 당신이 당신의 기능을 지정하는 곳입니다.e.preventDefault();줄은 "저장..." 창이 열리지 않도록 하기 위한 것입니다.어떤 이유로 그것을 보관하고 싶다면, 이 선을 자유롭게 제거하세요.

언급URL : https://stackoverflow.com/questions/93695/best-cross-browser-method-to-capture-ctrls-with-jquery