jQuery 이벤트 키 누르기:어떤 키를 눌렀습니까?
jQuery를 사용하면 키 누르기 이벤트에 바인드할 때 어떤 키가 눌렸는지 어떻게 알 수 있습니까?
$('#searchbox input').bind('keypress', function(e) {});
를 누르면 전송이 트리거됩니다.
[갱신]
스스로 답을 찾았지만(또는 더 나은 답을 찾기는 했지만) 다소 변화가 있을 것 같습니다.
keyCode ★★★★★★★★★★★★★★★★★」which특히 유니코드 키가 되지 않는 것은 무엇입니까?
하나의 속성을 제공하는 브라우저와 다른 속성을 제공하는 브라우저가 있습니까?
실제로 이것이 더 낫다.
var code = e.keyCode || e.which;
if(code == 13) { //Enter keycode
//Do something
}
이거 드셔보세요
$('#searchbox input').bind('keypress', function(e) {
if(e.keyCode==13){
// Enter pressed... do anything here...
}
});
jQuery UI를 사용하는 경우 공통 키 코드에 대한 변환이 있습니다.in ui/ui/ui.core.js:
$.ui.keyCode = {
...
ENTER: 13,
...
};
tests/simulate/jquery.simulate.js에도 번역이 있습니다만, 코어 JS 라이브러리에서는 아무것도 찾을 수 없었습니다.난 단지 출처를 알렸을 뿐이야.어쩌면 이 마법의 숫자를 없앨 다른 방법이 있을지도 몰라.
String.charCodeAt 및 .fromCharCode를 사용할 수도 있습니다.
>>> String.charCodeAt('\r') == 13
true
>>> String.fromCharCode(13) == '\r'
true
jQuery를 사용하고 있기 때문에 반드시 .which를 사용해야 합니다.브라우저마다 다른 속성을 설정하지만 jQuery는 그것들을 정규화하고 각각의 경우에 .which 값을 설정합니다.다음의 내용에 대해서는, http://api.jquery.com/keydown/ 의 메뉴얼을 참조해 주세요.
어떤 키를 눌렀는지 판별하기 위해 핸들러 함수에 전달된 이벤트개체를 조사할 수 있습니다.브라우저는 이 정보를 저장하기 위해 다른 속성을 사용하는 반면, jQuery는 .which 속성을 정규화하여 키 코드를 확실하게 취득할 수 있도록 합니다.
...다음 예에서는 폼의 송신을 금지합니다(키 스트로크 #13을 캡처할 때의 기본적인 의도를 나타냅니다).
$('input#search').keypress(function(e) {
if (e.which == '13') {
e.preventDefault();
doSomethingWith(this.value);
}
});
// 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');
}
});
편집: 이것은 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
}
});
여기 제가 이 블로그에서 받은 지도키 치트시트입니다. 
훌륭한 jquery를 확인해 보세요.키 조합을 지원하는 단축키 플러그인:
$(document).bind('keydown', 'ctrl+c', fn);
다음은 키 코드의 거의 모든 목록입니다.
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"
$(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();
});
});
도움이 되길 바랍니다!!!
다음은 다양한 브라우저의 동작에 대한 자세한 설명입니다.http://unixpapa.com/js/key.html
난 장님이었어
e.which
에는 키의 ASCII 코드가 포함됩니다.
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which 를 참조해 주세요.
이 행으로 솔루션 코드를 보충합니다.e.preventDefault();·폼 입력란에서는 enter pressed로 제출하지 않습니다.
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
e.preventDefault();
//Do something
}
사용하다event.key그리고 현대 JS!
더 이상 번호 코드가 없습니다.키를 직접 확인할 수 있습니다.예를들면"Enter","LeftArrow","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...
}
});
숨김 형식이 아닌 숨김 제출을 style="display:none"을 사용하여 일반 제출을 추가합니다.다음으로 (코드에서 불필요한 속성을 삭제) 예를 제시하겠습니다.
<form>
<input type="text">
<input type="submit" style="display:none">
</form>
기본적으로 키를 입력할 수 있으며 JavaScript가 필요하지 않으며 모든 브라우저에서 작동합니다.
다음은 입력 키를 처리하는 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/ 에서 찾을 수 있습니다.
마녀;)
/*
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/
$(document).bind('keypress', function (e) {
console.log(e.which); //or alert(e.which);
});
콘솔에서 결과를 보려면 firbug가 필요합니다.
일부 브라우저는 keyCode를 사용하고 다른 브라우저는 keyCode를 사용합니다.jQuery를 사용하는 경우 jQuery가 표준화하는 방법으로 안정적으로 사용할 수 있습니다.정말로.
$('#searchbox input').bind('keypress', function(e) {
if(e.keyCode==13){
}
});
킬리안의 대답에 따르면:
키 입력만 중요한 경우:
<form action="javascript:alert('Enter');">
<input type=text value="press enter">
</form>
가장 쉬운 방법은 다음과 같습니다.
$("#element").keydown(function(event) {
if (event.keyCode == 13) {
localiza_cep(this.value);
}
});
jQuery용 플러그인을 작성했습니다.keypress이벤트입니다.번호를 찾아서 입력하는 대신 다음 작업만 하면 됩니다.
사용방법
- 아래에 있는 코드 포함
- 다음 코드를 실행합니다.
$(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"눌렀을 때 발사할 수 있습니다."ctrl"눌렀을 때 발사하거나, 숫자의 경우에는 그냥 발사한다.1따옴표는 없습니다.누르면 불이 납니다.)
예/코드:
function getPressedKey(e){var a,s=e.keyCode||e.which,c=65,r=66,o=67,l=68,t=69,f=70,n=71,d=72,i=73,p=74,u=75,h=76,m=77,w=78,k=79,g=80,b=81,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=20,J=27,L=33,M=34,N=35,O=36,Q=37,R=38,S=40,T=45,U=46,V=91,W=92,X=93,Y=48,Z=49,$=50,_=51,ea=52,aa=53,sa=54,ca=55,ra=56,oa=57,la=96,ta=97,fa=98,na=99,da=100,ia=101,pa=102,ua=103,ha=104,ma=105,wa=106,ka=107,ga=109,ba=110,va=111,qa=112,ya=113,ja=114,xa=115,za=116,Ca=117,Ka=118,Pa=119,Aa=120,Ba=121,Da=122,Ea=123,Fa=114,Ga=145,Ha=186,Ia=187,Ja=188,La=189,Ma=190,Na=191,Oa=192,Qa=219,Ra=220,Sa=221,Ta=222;return s==Fa&&(a="numlock"),s==Ga&&(a="scrolllock"),s==Ha&&(a="semicolon"),s==Ia&&(a="equals"),s==Ja&&(a="comma"),s==La&&(a="dash"),s==Ma&&(a="period"),s==Na&&(a="slash"),s==Oa&&(a="grave"),s==Qa&&(a="openbracket"),s==Ra&&(a="backslash"),s==Sa&&(a="closebracket"),s==Ta&&(a="singlequote"),s==B&&(a="ctrl"),s==D&&(a="backspace"),s==E&&(a="enter"),s==F&&(a="shift"),s==G&&(a="alt"),s==H&&(a="pause"),s==I&&(a="caps"),s==J&&(a="esc"),s==L&&(a="pageup"),s==M&&(a="padedown"),s==N&&(a="end"),s==O&&(a="home"),s==Q&&(a="leftarrow"),s==R&&(a="uparrow"),s==S&&(a="downarrow"),s==T&&(a="insert"),s==U&&(a="delete"),s==V&&(a="winleft"),s==W&&(a="winright"),s==X&&(a="select"),s==Z&&(a=1),s==$&&(a=2),s==_&&(a=3),s==ea&&(a=4),s==aa&&(a=5),s==sa&&(a=6),s==ca&&(a=7),s==ra&&(a=8),s==oa&&(a=9),s==Y&&(a=0),s==ta&&(a=1),s==fa&&(a=2),s==na&&(a=3),s==da&&(a=4),s==ia&&(a=5),s==pa&&(a=6),s==ua&&(a=7),s==ha&&(a=8),s==ma&&(a=9),s==la&&(a=0),s==wa&&(a="times"),s==ka&&(a="add"),s==ga&&(a="minus"),s==ba&&(a="decimal"),s==va&&(a="devide"),s==qa&&(a="f1"),s==ya&&(a="f2"),s==ja&&(a="f3"),s==xa&&(a="f4"),s==za&&(a="f5"),s==Ca&&(a="f6"),s==Ka&&(a="f7"),s==Pa&&(a="f8"),s==Aa&&(a="f9"),s==Ba&&(a="f10"),s==Da&&(a="f11"),s==Ea&&(a="f12"),s==c&&(a="a"),s==r&&(a="b"),s==o&&(a="c"),s==l&&(a="d"),s==t&&(a="e"),s==f&&(a="f"),s==n&&(a="g"),s==d&&(a="h"),s==i&&(a="i"),s==p&&(a="j"),s==u&&(a="k"),s==h&&(a="l"),s==m&&(a="m"),s==w&&(a="n"),s==k&&(a="o"),s==g&&(a="p"),s==b&&(a="q"),s==v&&(a="r"),s==q&&(a="s"),s==y&&(a="t"),s==j&&(a="u"),s==x&&(a="v"),s==z&&(a="w"),s==C&&(a="x"),s==K&&(a="y"),s==P&&(a="z"),s==A&&(a="space"),a}
$(document).keydown(function(e) {
$("#key").text(getPressedKey(e));
console.log(getPressedKey(e));
if (getPressedKey(e)=="space") {
e.preventDefault();
}
if (getPressedKey(e)=="backspace") {
e.preventDefault();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The Pressed Key: <span id=key></span></p>왜냐하면 긴 버전이 너무...뭐...PasteBin 링크를 만들었습니다.
http://pastebin.com/VUaDevz1
그event.keyCode그리고.event.which는 권장되지 않습니다.위의 @Gibolt 답변을 참조하거나 다음 문서를 참조하십시오.https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
event.key대신 사용해야 합니다.
keypress이벤트도 권장되지 않습니다.https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event
이것을 시험해 보세요.
jQuery('#myInput').keypress(function(e) {
code = e.keyCode ? e.keyCode : e.which;
if(code.toString() == 13) {
alert('You pressed enter!');
}
});
언급URL : https://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed
'source' 카테고리의 다른 글
| Ubuntu 18.04에서 MariaDB 10.01을 완전히 삭제합니다. (0) | 2022.11.05 |
|---|---|
| 목록 항목의 역순 (0) | 2022.10.27 |
| JavaScript Promise 상태를 동기적으로 판별하려면 어떻게 해야 합니까? (0) | 2022.10.27 |
| MySQL: #126: 테이블에 대한 잘못된 키 파일 (0) | 2022.10.27 |
| 구성 및 라이브러리 파일을 사용하여 MySQL을 완전히 제거하려면 어떻게 해야 합니까? (0) | 2022.10.27 |