복붙노트

[JQUERY] 어떻게 순수 JS 또는 jQuery를 함께 이스케이프 키를 누르 감지?

JQUERY

어떻게 순수 JS 또는 jQuery를 함께 이스케이프 키를 누르 감지?

해결법


  1. 1.참고 : 키 코드 대신 사용하는 키를 사용되지되고있다.

    참고 : 키 코드 대신 사용하는 키를 사용되지되고있다.

    function keyPress (e) {
        if(e.key === "Escape") {
            // write your logic here.
        }
    }
    

    코드 조각 :

    VAR = document.getElementById를 MSG ( '상태 MSG'); document.body.addEventListener ( '누르기', 기능 (E) { 경우 (e.key == "탈출") { msg.textContent + = '탈출을 누르면' } }); ESC 키를 눌러 <스팬 ID = "상태 MSG">

    키 코드 사용되지되고있다

    $(document).keyup(function(e) {
         if (e.key === "Escape") { // escape key maps to keycode `27`
            // <DO YOUR WORK HERE>
        }
    });
    

    jQuery로 이스케이프 키에 대한 어떤 키 코드


  2. 2.를 keyDown 이벤트는 탈출을 위해 좋은 일을하고 모든 브라우저에서 키 코드를 사용할 수 있도록하는 이점을 갖고 있습니다. 또한, 몸보다는 문서에 수신기를 연결해야합니다.

    를 keyDown 이벤트는 탈출을 위해 좋은 일을하고 모든 브라우저에서 키 코드를 사용할 수 있도록하는 이점을 갖고 있습니다. 또한, 몸보다는 문서에 수신기를 연결해야합니다.

    2016 업데이트 월

    키 코드 사용되지 과정에서 지금 당신은 여전히 ​​지금은 괜찮은 브라우저 지원에 대한 대체가 필요합니다 있지만 대부분의 최신 브라우저를 지원하지 않는 크롬과 사파리의 현재 릴리스를 작성시 (지금 키 속성을 제공합니다 ).

    업데이트 2018년 9월 evt.key 이제 모든 현대적인 브라우저에서 지원됩니다.

    document.onkeydown = 함수 (EVT) { EVT = EVT || window.event를; VAR isEscape 거짓 =; 경우 (EVT의 "키") { isEscape = (evt.key === "탈출"|| evt.key을 === "Esc 키를"); } 다른 { isEscape = (evt.keyCode === 27); } 경우 (isEscape) { 경고 ( "탈출"); } }; 내가 다음 Esc 키를 눌러 클릭


  3. 3.자바 스크립트를 사용하면이 확인 작업 jsfiddle을 수행 할 수 있습니다

    자바 스크립트를 사용하면이 확인 작업 jsfiddle을 수행 할 수 있습니다

    document.onkeydown = function(evt) {
        evt = evt || window.event;
        if (evt.keyCode == 27) {
            alert('Esc key pressed.');
        }
    };
    

    jQuery를 사용하면이 확인 작업 jsfiddle을 수행 할 수 있습니다

    jQuery(document).on('keyup',function(evt) {
        if (evt.keyCode == 27) {
           alert('Esc key pressed.');
        }
    });
    

  4. 4.이는 &의 keyup || && 키 코드 확인 를 keyDown

    이는 &의 keyup || && 키 코드 확인 를 keyDown

    $(document).keydown(function(e){
       var code = e.keyCode || e.which;
       alert(code);
    });
    

  5. 5.가장 좋은 방법은이 있도록 기능이다

    가장 좋은 방법은이 있도록 기능이다

    함수:

    $.fn.escape = function (callback) {
        return this.each(function () {
            $(document).on("keydown", this, function (e) {
                var keycode = ((typeof e.keyCode !='undefined' && e.keyCode) ? e.keyCode : e.which);
                if (keycode === 27) {
                    callback.call(this, e);
                };
            });
        });
    };
    

    예:

    $("#my-div").escape(function () {
        alert('Escape!');
    })
    

  6. 6.아래뿐만 아니라 ESC 키뿐만 아니라 검사 누를 때와 상황에 따라, 그것은 행동을하거나하지 않습니다 조건을 해제 코드입니다.

    아래뿐만 아니라 ESC 키뿐만 아니라 검사 누를 때와 상황에 따라, 그것은 행동을하거나하지 않습니다 조건을 해제 코드입니다.

    이 예에서,

    e.preventDefault();
    

    ESC를 키를 눌러 동작을 사용할 수 없게됩니다.

    이와 사업부를 숨길처럼 당신은 아무것도 할 수 있습니다 :

    document.getElementById('myDivId').style.display = 'none';
    

    어디 ESC 키도 고려 누르면 :

    (e.target.nodeName=='BODY')
    

    모든이에 적용 할 경우이 경우 조건 부분을 제거 할 수 있습니다. 아니면 커서가 입력 상자에있는 경우에만이 작업을 적용하려면 여기를 INPUT을 타겟팅 할 수 있습니다.

    window.addEventListener('keydown', function(e){
        if((e.key=='Escape'||e.key=='Esc'||e.keyCode==27) && (e.target.nodeName=='BODY')){
            e.preventDefault();
            return false;
        }
    }, true);
    

  7. 7.파이어 폭스 78 사용에 대한이 ( "키를 누를 때"Esc 키를 작동하지 않습니다)

    파이어 폭스 78 사용에 대한이 ( "키를 누를 때"Esc 키를 작동하지 않습니다)

    function keyPress (e)(){
      if (e.key == "Escape"){
         //do something here      
      }
    document.addEventListener("keyup", keyPress);
    

  8. 8.내가 가장 간단한 방법은 바닐라 자바 ​​스크립트라고 생각합니다 :

    내가 가장 간단한 방법은 바닐라 자바 ​​스크립트라고 생각합니다 :

    document.onkeyup = function(event) {
       if (event.key === 27){
         //do something here
       }
    }
    

  9. 9.당신은 문서 keyUp 이벤트에 리스너를 첨부 할 수 있습니다.

    당신은 문서 keyUp 이벤트에 리스너를 첨부 할 수 있습니다.

    당신이 있는지 확인하려면 또한, 다른 키는 Esc 키와 함께 누르면되지, 당신은 ctrlKey, Alt 키, 그리고 shifkey의 값을 사용할 수 있습니다.

     document.addEventListener('keydown', (event) => {
            
            if (event.key === 'Escape') {
             //if esc key was not pressed in combination with ctrl or alt or shift
                const isNotCombinedKey = !(event.ctrlKey || event.altKey || event.shiftKey);
                if (isNotCombinedKey) {
                    console.log('Escape key was pressed with out any group keys')
                  
                }
            }
        });
    
  10. from https://stackoverflow.com/questions/3369593/how-to-detect-escape-key-press-with-pure-js-or-jquery by cc-by-sa and MIT license