복붙노트

[JQUERY] jQuery를 이벤트 키 누르기 : 어떤 키를 눌렀는지?

JQUERY

jQuery를 이벤트 키 누르기 : 어떤 키를 눌렀는지?

해결법

  1. 1.사실이 더있다 :

    사실이 더있다 :

     var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }

  2. 2.이 시도

    이 시도

    $('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});

  3. 3.당신이 jQuery를 UI를 사용하는 경우는 공통 키 코드에 대한 번역이. 에서 UI / UI / ui.core.js :

    당신이 jQuery를 UI를 사용하는 경우는 공통 키 코드에 대한 번역이. 에서 UI / UI / ui.core.js :

    $.ui.keyCode = { 
    ...
    ENTER: 13, 
    ...
};

    이 또한 시험 / 시뮬레이션 / jquery.simulate.js에서 일부 번역입니다하지만 핵심 JS 라이브러리에서 찾을 수 없습니다. 알았지, 나는 단지 소스를 grep'ed. 아마이 마법의 숫자를 제거하는 다른 방법이있다.

    또한하면 String.charCodeAt 및 .fromCharCode를 사용할 수있다 :

    >>> String.charCodeAt('\r') == 13
true
>>> String.fromCharCode(13) == '\r'
true

  4. 4.당신이 jQuery를 사용하고 있음을 감안할 때, 당신은 절대적으로 .which 사용해야합니다. 예 다른 브라우저는 서로 다른 속성을 설정하지만, jQuery를 그들을 정상화하고 각각의 경우에서 .which 값을 설정합니다. 이 상태 http://api.jquery.com/keydown/에서 documetation를 참조하십시오 :

    당신이 jQuery를 사용하고 있음을 감안할 때, 당신은 절대적으로 .which 사용해야합니다. 예 다른 브라우저는 서로 다른 속성을 설정하지만, jQuery를 그들을 정상화하고 각각의 경우에서 .which 값을 설정합니다. 이 상태 http://api.jquery.com/keydown/에서 documetation를 참조하십시오 :

  5. 5.(# 13 키 입력을 캡처 할 때 정기적으로 기본 목적)이 예제 방지는 제출 양식 :

    (# 13 키 입력을 캡처 할 때 정기적으로 기본 목적)이 예제 방지는 제출 양식 :

    $('input#search').keypress(function(e) {
  if (e.which == '13') {
     e.preventDefault();
     doSomethingWith(this.value);
   }
});

  6. 6.편집 : 이는 IE 작동 ...

    편집 : 이는 IE 작동 ...

    나는이 오래된 게시물입니다 알지만 다른 사람이 유용하게 찾을 수 있습니다.

    주요 이벤트는 그래서 대신에 당신은 또한 좀 더 쉽게 읽을 수 있도록 키 값을 사용할 수있는 키 코드 값을 사용하여 매핑됩니다.

    $(document).ready( function() {
    $('#searchbox input').keydown(function(e)
    {
     setTimeout(function ()
     { 
       //rather than using keyup, you can use keydown to capture 
       //the input as it's being typed.
       //You may need to use a timeout in order to allow the input to be updated
     }, 5);
    }); 
    if(e.key == "Enter")
    {
       //Enter key was pressed, do stuff
    }else if(e.key == "Spacebar")
    {
       //Spacebar was pressed, do stuff
    }
});

    여기에 내가이 블로그에서 가져온 매핑 된 키가있는 치트 시트입니다

  7. 7.

     // in jquery source code...
 if (!event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode)) {
     event.which = event.charCode || event.keyCode;
 }

 // So you have just to use
 $('#searchbox input').bind('keypress', function(e) {
     if (e.which === 13) {
         alert('ENTER WAS PRESSED');
     }
 });

  8. 8.키 조합을 지원하는 플러그인 우수한 jquery.hotkeys를 체크 아웃 :

    키 조합을 지원하는 플러그인 우수한 jquery.hotkeys를 체크 아웃 :

    $(document).bind('keydown', 'ctrl+c', fn);

  9. 9.이 꽤 많이 키 코드의 전체 목록입니다 :

    이 꽤 많이 키 코드의 전체 목록입니다 :

    3: "break",
8: "backspace / delete",
9: "tab",
12: 'clear',
13: "enter",
16: "shift",
17: "ctrl",
18: "alt",
19: "pause/break",
20: "caps lock",
27: "escape",
28: "conversion",
29: "non-conversion",
32: "spacebar",
33: "page up",
34: "page down",
35: "end",
36: "home ",
37: "left arrow ",
38: "up arrow ",
39: "right arrow",
40: "down arrow ",
41: "select",
42: "print",
43: "execute",
44: "Print Screen",
45: "insert ",
46: "delete",
48: "0",
49: "1",
50: "2",
51: "3",
52: "4",
53: "5",
54: "6",
55: "7",
56: "8",
57: "9",
58: ":",
59: "semicolon (firefox), equals",
60: "<",
61: "equals (firefox)",
63: "ß",
64: "@ (firefox)",
65: "a",
66: "b",
67: "c",
68: "d",
69: "e",
70: "f",
71: "g",
72: "h",
73: "i",
74: "j",
75: "k",
76: "l",
77: "m",
78: "n",
79: "o",
80: "p",
81: "q",
82: "r",
83: "s",
84: "t",
85: "u",
86: "v",
87: "w",
88: "x",
89: "y",
90: "z",
91: "Windows Key / Left ⌘ / Chromebook Search key",
92: "right window key ",
93: "Windows Menu / Right ⌘",
96: "numpad 0 ",
97: "numpad 1 ",
98: "numpad 2 ",
99: "numpad 3 ",
100: "numpad 4 ",
101: "numpad 5 ",
102: "numpad 6 ",
103: "numpad 7 ",
104: "numpad 8 ",
105: "numpad 9 ",
106: "multiply ",
107: "add",
108: "numpad period (firefox)",
109: "subtract ",
110: "decimal point",
111: "divide ",
112: "f1 ",
113: "f2 ",
114: "f3 ",
115: "f4 ",
116: "f5 ",
117: "f6 ",
118: "f7 ",
119: "f8 ",
120: "f9 ",
121: "f10",
122: "f11",
123: "f12",
124: "f13",
125: "f14",
126: "f15",
127: "f16",
128: "f17",
129: "f18",
130: "f19",
131: "f20",
132: "f21",
133: "f22",
134: "f23",
135: "f24",
144: "num lock ",
145: "scroll lock",
160: "^",
161: '!',
163: "#",
164: '$',
165: 'ù',
166: "page backward",
167: "page forward",
169: "closing paren (AZERTY)",
170: '*',
171: "~ + * key",
173: "minus (firefox), mute/unmute",
174: "decrease volume level",
175: "increase volume level",
176: "next",
177: "previous",
178: "stop",
179: "play/pause",
180: "e-mail",
181: "mute/unmute (firefox)",
182: "decrease volume level (firefox)",
183: "increase volume level (firefox)",
186: "semi-colon / ñ",
187: "equal sign ",
188: "comma",
189: "dash ",
190: "period ",
191: "forward slash / ç",
192: "grave accent / ñ / æ",
193: "?, / or °",
194: "numpad period (chrome)",
219: "open bracket ",
220: "back slash ",
221: "close bracket / å",
222: "single quote / ø",
223: "`",
224: "left or right ⌘ key (firefox)",
225: "altgr",
226: "< /git >",
230: "GNOME Compose Key",
231: "ç",
233: "XF86Forward",
234: "XF86Back",
240: "alphanumeric",
242: "hiragana/katakana",
243: "half-width/full-width",
244: "kanji",
255: "toggle touchpad"

  10. 10.

    $(document).ready(function(){
    $("#btnSubmit").bind("click",function(){$('#'+'<%=btnUpload.ClientID %>').trigger("click");return false;});
    $("body, input, textarea").keypress(function(e){
        if(e.which==13) $("#btnSubmit").click();
    });
});

    이 당신을 도울 수 있습니다 희망!

  11. 11.좋아, 나는 장님 :

    좋아, 나는 장님 :

    e.which

    키의 ASCII 코드를 포함합니다.

    https://developer.mozilla.org/En/DOM/Event.which 참조

  12. 12.여기에 다양한 브라우저의 동작의에서 길이의 설명이다 http://unixpapa.com/js/key.html

    여기에 다양한 브라우저의 동작의에서 길이의 설명이다 http://unixpapa.com/js/key.html

  13. 13.난 그냥 ()이 라인 e.preventDefault와 솔루션 코드를 보완 할 수 있습니다 ;. 폼의 입력 필드의 경우 우리는 누르면 입력에 제출 참석하지 않는다

    난 그냥 ()이 라인 e.preventDefault와 솔루션 코드를 보완 할 수 있습니다 ;. 폼의 입력 필드의 경우 우리는 누르면 입력에 제출 참석하지 않는다

    var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   e.preventDefault();
   //Do something
 }

  14. 14.숨겨진 입력하지 제출 숨겨진 추가 그냥 평범한 스타일 =로 제출 "디스플레이 : 없음". 다음 예 (코드 불필요한 속성을 제거)이다.

    숨겨진 입력하지 제출 숨겨진 추가 그냥 평범한 스타일 =로 제출 "디스플레이 : 없음". 다음 예 (코드 불필요한 속성을 제거)이다.

    <form>
  <input type="text">
  <input type="submit" style="display:none">
</form>

    그것은 기본적으로 키를 입력 받아, 자바 스크립트가 필요, 모든 브라우저에서 작동하지 않습니다.

  15. 15.여기에 키의 존재를 누르면 입력 처리 할 JQuery와 확장입니다.

    여기에 키의 존재를 누르면 입력 처리 할 JQuery와 확장입니다.

    (function ($) {
    $.prototype.enterPressed = function (fn) {
        $(this).keyup(function (e) {
            if ((e.keyCode || e.which) == 13) {
                fn();
            }
        });
    };
}(jQuery || {}));

$("#myInput").enterPressed(function() {
    //do something
});

    동작하는 예제는 여기에서 찾을 수 있습니다 http://jsfiddle.net/EnjB3/8/

  16. 16.마녀)

    마녀)

    /*
This code is for example. In real life you have plugins like :
https://code.google.com/p/jquery-utils/wiki/JqueryUtils
https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js
https://github.com/madrobby/keymaster
http://dmauro.github.io/Keypress/

http://api.jquery.com/keydown/
http://api.jquery.com/keypress/
*/

var event2key = {'97':'a', '98':'b', '99':'c', '100':'d', '101':'e', '102':'f', '103':'g', '104':'h', '105':'i', '106':'j', '107':'k', '108':'l', '109':'m', '110':'n', '111':'o', '112':'p', '113':'q', '114':'r', '115':'s', '116':'t', '117':'u', '118':'v', '119':'w', '120':'x', '121':'y', '122':'z', '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter'};

var documentKeys = function(event) {
    console.log(event.type, event.which, event.keyCode);

    var keycode = event.which || event.keyCode; // par exemple : 112
    var myKey = event2key[keycode]; // par exemple : 'p'

    switch (myKey) {
        case 'a':
            $('div').css({
                left: '+=50'
            });
            break;
        case 'z':
            $('div').css({
                left: '-=50'
            });
            break;
        default:
            //console.log('keycode', keycode);
    }
};

$(document).on('keydown keyup keypress', documentKeys);

    데모 : http://jsfiddle.net/molokoloco/hgXyq/24/

  17. 17.더 이상 어떤 숫자 코드가 없습니다. 직접 키를 확인할 수 있습니다. 예를 들어 "입력", "왼 화살", "R", 또는 "R".

    더 이상 어떤 숫자 코드가 없습니다. 직접 키를 확인할 수 있습니다. 예를 들어 "입력", "왼 화살", "R", 또는 "R".

    const input = document.getElementById("searchbox");
input.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Submit
    }
    else if (event.key === "Q") {
        // Play quacking duck sound, maybe...
    }
});

    모질라 문서

    지원되는 브라우저

  18. 18.

    $(document).bind('keypress', function (e) {
    console.log(e.which);  //or alert(e.which);

});

    당신은 콘솔에서 결과를 볼 불을 지르고해야

  19. 19.일부 브라우저는 다른 사람들이 어떤을 사용하여, 키 코드를 사용합니다. 당신이 jQuery를 사용하는 경우 안정적으로 jQuery를 사물을 표준화하는 사용할 수 있습니다. 사실은,

    일부 브라우저는 다른 사람들이 어떤을 사용하여, 키 코드를 사용합니다. 당신이 jQuery를 사용하는 경우 안정적으로 jQuery를 사물을 표준화하는 사용할 수 있습니다. 사실은,

    $('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){

    }
});

  20. 20.킬리안의 대답에 따르면 :

    킬리안의 대답에 따르면 :

    만 입력하면 키를 누른다는 것이 중요하다 :

    <form action="javascript:alert('Enter');">
<input type=text value="press enter">
</form>

  21. 21.내가하는 가장 쉬운 방법은 다음과 같습니다

    내가하는 가장 쉬운 방법은 다음과 같습니다

    $("#element").keydown(function(event) {
    if (event.keyCode == 13) {
        localiza_cep(this.value);
    }
});

  22. 22.난 그냥 쉽게 키 누르기 이벤트를 할 수 jQuery를위한 플러그인을 만들었습니다. 대신 숫자를 찾아에 넣을 필요없이, 당신이 할 일은 이것이다 :

    난 그냥 쉽게 키 누르기 이벤트를 할 수 jQuery를위한 플러그인을 만들었습니다. 대신 숫자를 찾아에 넣을 필요없이, 당신이 할 일은 이것이다 :

    $(document).keydown(function(e) {
    if (getPressedKey(e) == theKeyYouWantToFireAPressEventFor /*Add 'e.ctrlKey here to only fire if the combo is CTRL+theKeyYouWantToFireAPressEventFor'*/) {
        // Your Code To Fire When You Press theKeyYouWantToFireAPressEventFor 
    }
});

    그것은 간단합니다. 제발 참고 theKeyYouWantToFireAPressEventFor 숫자지만, 문자열 (예 아니라고 "는"A가 단지 1, 숫자의 경우, CTRL (제어)을 눌렀을 때 불에, "Ctrl 키"를 누르면, 또는 화재 없음 따옴표. 1 눌렀을 때 그 해고.)

    getPressedKey 함수 (E)의 VAR {A, S = || e.keyCode e.which, C = 65, R = 66, = 67리터 = 68, T = 69, F = 70, N = 71, D = 72 난 u는 G = 80, B = 81, K = 79, m = 77, Y 78 = H = 76, 73 p = 74 75 = = V = 82, Q = 83, Y 84 = J = 85, X = 86, Z = 87, C = 88, K = 89, P = 90, A = 32, B = 17, D = 8, E = 13, F = 16, G = 18, H = 19, I는 U는 V = 91, L = 33, J = 27, M = 34, N = 35, O = 36, Q = 37, R = 38, S = 40, T = 45 20 46 = = W = 92, X = 93, Y = 48, Z = 49, = $ 50 = 51kg _ = 52, AA = 53, = 54 SA, CA = 55, RA = 56, NS = 57 V = (96) TA = 97 (FA) = 98 = 99, DA = 100 V = 101 PA = 102, I = 103, A = 104 = 105 시간 = 106에서, A = 107, GA = 109; BA = 1백10일 = 111, QA = 112 나중에 =, = 121, CA = 117, A = 118 파 = 119 AA, = 120, JA = 114, X = 115, ZA = 116, 113 다을 프랜 = 122의 EA = 123 빠 = 114, GA = 145, 하행 = 186, IA = 187, 구자 = 188 라 = 189, MA = 190 (NA) = 191, H = 192, QA = 219 라 = 220 SA는 = 221, 타행 = 222; 창 S ==에서 fa && (a가 = "숫자 잠금") == GA && (a가 = "ScrollLock이는") == 하행이야 && (a = "세미콜론") S, S == IA && ( A = &&, == 응 s에 && (a는 = "쉼표") == 라를 S) "에 해당"(A = "대시") == 엄마가이야 && (a는 = "기간")는 && (A =는 ==이야 "슬래시") && == H S (A = '중대'), (S) == QA && (a = "openbracket") == 라스 s에 && (a = "백 슬래시") == 사행 s에 && (a = "closebracket singlequote Ctrl 키 ")은, (a = && == B S" ") == 타행는 (A는 = && S" ") (S) == D && (a ="백 스페이스 ") == E s에 && (a =" "입력) == F는 (a = "시프트") (S) == && G (a = "ALT"), S &&이야 && == H (a = "중지"), I는 &&의 (A = "캡") && (a = "ESC") == L이야 && == J S (A는 = "페이지 업"), S ==이야 == M && (a = "padedown") == N s에 && (a = "단부") (S) == O && (a가 = "홈") == Q s에 && (a가 = "LEFTARROW") == R이야 && ( A = "자유")의 ==의 && (A = "셀인")의 == T && (A = "삽입"), S == U && (A = && == V S) "삭제"(A = "winleft")) == W && (a = "winright"S, S == X && (a = "선택") == Z && (a = 1), () == && $ s의 A = 2 초, 이야 == _ && (a = 3), (S) == EA && == AA && (a = 5) S (A = 4), (S) == SA && == CA && S (A = 6) (a = 7), S == RA && (a = 8), S == 즉 && (a = 9), S == Y && (a = 0) == s의 TA && (a = 1), (S) == FA && (a = 2), S == && (a = 3), S == DA && (a = 4) &&이 && (a = 5) == 파이야 == (A = 6) ■ == 뭐죠 && (a = 7), S == HA && (a = 8), S ==에서 && (a = 9) (a = 0) == (a = "시간") && == 시간의의 &&와 == s를 && (a = " 추가 'S) == GA && (a = "그라 티온") == 기본 조작 && (a = "소수"), S == VA && (a = "으로 나눔"), S == QA && (a = "F1" )) (S) == X && (a = "F4", S == JA && (a = "F3")) 나중에 && (a = "F2"== S, S == ZA && (a = "F5"). S == 칼슘 && (a = "F6") == s를 && (a = "F7") == 펜실바니아이야 && (a = "F8") ==의 AA이야 && (a = "F9"), S = = 바 && (a = "F10") == 다 s에 && (a = "F11"), S ==주세요 && (a = "F12"), S == C && (a = "A"), S == R && (a = 'B'), (S) == O && (a = "C") == L && (a = "D"), S == t && (a = "예"), S == F && (A S = "F") && N == S (A = "g"), S == D && (a = "H"), S == I && (a = "A"), S == P && (a = " j는 "), S == U && (a ="K ")의 H == && (a ="L "), S == m && (a = "m"), S == X && (a = "N"), S == K && (a = "O"), S == g && (a = "P"), S = = B && (a가 = "Q") == V이야 && (a = "R")가 == Q이야 && (a가 = "들") == Y이야 && (a = "t") == J이야 && (a = "U"), S == X && (a가 = "V") == Z이야 && (a = "W"), S == C && (a = "X") (S) == K && (a = "Y") && P == S (A = "Z"), S에서 == && (a = "공간") A} $ (문서) .keydown (함수 (E) { $ ( "# 키") 텍스트 (getPressedKey (예)).; CONSOLE.LOG (getPressedKey의 (e)); 경우 (getPressedKey (예) == "공간") { e.preventDefault (); } 경우 (getPressedKey (E) == "백 스페이스") { e.preventDefault (); } }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    누른 키 <키 마더 식>

    HTTP : 그래서 ... 음 ... 긴, 나는 그것을 위해 페이스트 빈 링크를 만든 긴 버전이기 때문에 //pastebin.com/VUaDevz1

  23. 23.event.keyCode 및 event.which는 depracated된다. 참조 @Gibolt 응답의 위 또는 확인 서류 : https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

    event.keyCode 및 event.which는 depracated된다. 참조 @Gibolt 응답의 위 또는 확인 서류 : https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

    event.key 대신 사용되어야한다

    키를 누를 때 이벤트가 아니라 depracated한다 : https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

  24. 24.이 시도:

    이 시도:

    jQuery('#myInput').keypress(function(e) {
    code = e.keyCode ? e.keyCode : e.which;
    if(code.toString() == 13) {
        alert('You pressed enter!');
    }
});

    25. from https://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 사용하여 드롭 다운 목록 (선택 상자)에서 선택한 텍스트를 가져옵니다  (0) 2020.09.24
[JQUERY] 숫자의 배열의 합을 찾는 방법  (0) 2020.09.24
[JQUERY] 정규 표현식은 비 ASCII 문자와 일치 하는가?  (0) 2020.09.24
[JQUERY] 어떻게 각도와 jQuery를 사용 하는가?  (0) 2020.09.24
[JQUERY] 작동하지 않는 AJAX 성공의 $ (이) 내부  (0) 2020.09.24
,

티스토리툴바