jQuery를 사용하여 키보드에서 Enter를 누르는 방법은 무엇입니까?
-
13-09-2019 - |
문제
사용자가 누락했는지 여부를 감지하고 싶습니다. 입력하다 jQuery 사용.
이것이 어떻게 가능한지? 플러그인이 필요합니까?
편집 : 사용해야 할 것 같습니다. keypress()
방법.
해당 명령에 브라우저 문제가 있는지 아는 사람이 있는지 알고 싶었습니다. 내가 알아야 할 브라우저 호환성 문제가 있습니까?
해결책
jQuery의 요점은 브라우저 차이에 대해 걱정할 필요가 없다는 것입니다. 나는 당신이 안전하게 함께 갈 수 있다고 확신합니다 입력하다 모든 브라우저에서 13 명입니다. 따라서이를 염두에두고 할 수 있습니다.
$(document).on('keypress',function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
다른 팁
"on enter 키 프레스"이벤트를 쉽게 바인딩하기 위해 작은 플러그인을 썼습니다.
$.fn.enterKey = function (fnc) {
return this.each(function () {
$(this).keypress(function (ev) {
var keycode = (ev.keyCode ? ev.keyCode : ev.which);
if (keycode == '13') {
fnc.call(this, ev);
}
})
})
}
용법:
$("#input").enterKey(function () {
alert('Enter!');
})
코드를 @paolo bergantino가 게시 할 수 없었지만 변경했을 때 $(document)
그리고 e.which
대신에 e.keyCode
그런 다음 결함없이 작동하는 것을 발견했습니다.
$(document).keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
나는 이것이 더 많은 크로스 브라우저와 호환되는 것을 발견했다.
$(document).keypress(function(event) {
var keycode = event.keyCode || event.which;
if(keycode == '13') {
alert('You pressed a "enter" key in somewhere');
}
});
jQuery 'KeyDown'이벤트 핸들을 사용하여이를 수행 할 수 있습니다.
$( "#start" ).on( "keydown", function(event) {
if(event.which == 13)
alert("Entered!");
});
나는 언젠가이 솔루션을 생각해 냈다. 나는 그것이 누군가를 돕기를 바랍니다.
$(document).ready(function(){
$('#loginforms').keypress(function(e) {
if (e.which == 13) {
//e.preventDefault();
alert('login pressed');
}
});
$('#signupforms').keypress(function(e) {
if (e.which == 13) {
//e.preventDefault();
alert('register');
}
});
});
거기에 키 누름() 이벤트 방법. Enter 키의 ASCII 번호는 13 개이며 사용중인 브라우저에 의존하지 않습니다.
위의 Andrea의 답변을 약간 연장하면 수정 된 Enter 프레스 (예 : Ctrl-enter 또는 Shift-Enter)를 캡처 할 때 도우미 방법이 더 유용합니다. 예를 들어,이 변형은 다음과 같은 바인딩을 허용합니다.
$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')
사용자가 해당 양식의 Textarea에 중점을두고 Ctrl-Enter를 누를 때 양식을 제출하려면.
$.fn.enterKey = function (fnc, mod) {
return this.each(function () {
$(this).keypress(function (ev) {
var keycode = (ev.keyCode ? ev.keyCode : ev.which);
if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
fnc.call(this, ev);
}
})
})
}
(또한보십시오 ctrl+textarea에 jQuery를 입력하십시오)
경우에 따라 억제해야 할 수도 있습니다. 입력하다 페이지의 특정 영역에 대한 키이지만 아래 페이지와 같이 페이지의 다른 영역에 대한 키는 없습니다. 헤더 <div>
a 검색 필드.
이 작업을 수행하는 방법을 알아내는 데 약간의 시간이 걸렸으며 커뮤니티를 위해이 간단하지만 완전한 예를 게시하고 있습니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Script</title>
<script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.container .content input').keypress(function (event) {
if (event.keyCode == 10 || event.keyCode == 13) {
alert('Form Submission needs to occur using the Submit button.');
event.preventDefault();
}
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<div class="FileSearch">
<!-- Other HTML here -->
</div>
</div>
<div class="content">
<form id="testInput" action="#" method="post">
<input type="text" name="text1" />
<input type="text" name="text2" />
<input type="text" name="text3" />
<input type="submit" name="Submit" value="Submit" />
</form>
</div>
</div>
</body>
</html>
JSFiddle Playground에 링크: [Submit]
버튼은 아무것도하지 않고 누릅니다 입력하다 텍스트 상자 컨트롤 중 하나에서 양식을 제출하지 않습니다.
이것을 시도하여 Enter 키를 누르십시오.
$(document).on("keypress", function(e){
if(e.which == 13){
alert("You've pressed the enter key!");
}
});
데모 @ 참조 키보드에서 Enter 키 프레스를 감지하십시오
keypress 방법을 사용하여 jQuery를 사용하여 키보드에서 Enter를 누르는 것을 감지 하시겠습니까?
https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/
$('#someTextBox').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
alert('You pressed a "enter" key in textbox');
}
event.stopPropagation();
});
<html>
<head>
<title>jQuery keypress() Method To Detect Enter key press or not Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>Write something here & press enter</h1>
<label>TextBox Area: </label>
<input id="someTextBox" type="text" size="100" />
</body>
</html>
사용자가 Enter를 누르는지 여부를 감지하는 쉬운 방법은 키 번호를 사용하는 것입니다. 키 번호는 = 13입니다. 장치의 키 값을 확인합니다.
$("input").keypress(function (e) {
if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
|| (97 <= e.which && e.which <= 97 + 25)) {
var c = String.fromCharCode(e.which);
$("p").append($("<span/>"))
.children(":last")
.append(document.createTextNode(c));
} else if (e.which == 8) {
// backspace in IE only be on keydown
$("p").children(":last").remove();
}
$("div").text(e.which);
});
Enter 키를 누르면 결과가 13으로 나타납니다. 키 값을 사용하여 함수를 호출하거나 원하는대로 할 수 있습니다.
$(document).keypress(function(e) {
if(e.which == 13) {
console.log("User entered Enter key");
// the code you want to run
}
});
키를 누르면 버튼을 타겟팅하려면 키를 누르면 코드를 사용할 수 있습니다.
$(document).bind('keypress', function(e){
if(e.which === 13) { // return
$('#butonname').trigger('click');
}
});
도움이되기를 바랍니다
가장 간단한 방법이 사용될 것이라고 생각합니다 바닐라 Javacript :
document.onkeyup = function(event) {
if (event.key === 13){
alert("enter was pressed");
}
}
$(function(){
$('.modal-content').keypress(function(e){
debugger
var id = this.children[2].children[0].id;
if(e.which == 13) {
e.preventDefault();
$("#"+id).click();
}
})
});
$(document).keyup(function(e) {
if(e.key === 'Enter') {
//Do the stuff
}
});