jquery - 처리 - 엔터 키 코드
사용자가 Enter 키를 눌러 양식을 제출하지 못하게합니다. (18)
아무 데나 Enter 키 허용 안함
양식에 <textarea>
가 없으면 <form>
다음을 추가하십시오.
<form ... onkeypress="return event.keyCode != 13;">
또는 jQuery와 함께 :
$(document).on("keypress", "form", function(event) {
return event.keyCode != 13;
});
그러면 폼 안의 모든 키를 누르는 것이 keyCode에서 확인됩니다. 13 (Enter 키)이 아니면 true를 반환하고 아무 것도 예상대로 진행됩니다. 13 (Enter 키) 인 경우 false를 반환하고 즉시 아무것도 중지되므로 양식이 제출되지 않습니다.
keypress
이벤트는 문자가 실제로 삽입 될 때만 발생하기 때문에 keydown
보다 선호됩니다. keydown
(및 keyup
)은 제어 키를 포함하여 키를 누를 때 발생합니다. 그리고 keypress
의 keyCode
는 삽입되는 실제 문자를 나타내며 사용 된 물리적 인 키는 나타내지 않습니다. 이 방법을 사용하면 Numpad Enter 키 (108)를 누를 지 명시 적으로 확인할 필요가 없습니다. 키 업이 양식 제출을 차단하기에는 너무 늦었습니다.
$(document)
대신에 다른 답변에서 제안 된 $(window)
는 IE <= 8의 keydown
/ keypress
/ keyup
에서 작동하지 않으므로 가난한 사용자를 keyup
는 경우에는 좋지 않습니다. 게다가.
텍스트 영역에만 Enter 키 허용
양식에 <textarea>
가 있으면 (물론 Enter 키를 받아 들여야합니다), <textarea>
가 아닌 모든 개별 입력 요소에 keypress 핸들러를 추가하십시오.
<input ... onkeypress="return event.keyCode != 13;">
<select ... onkeypress="return event.keyCode != 13;">
...
상용구를 줄이려면 jQuery를 사용하는 것이 좋습니다.
$(document).on("keypress", ":input:not(textarea)", function(event) {
return event.keyCode != 13;
});
이러한 입력 요소에 다른 이벤트 핸들러 함수가 연결되어있는 경우 (어떤 이유로 든 enter 키에서 호출하려는 경우), false를 반환하는 대신 이벤트의 기본 동작 만 방지하므로 다른 핸들러로 올바르게 전파 할 수 있습니다.
$(document).on("keypress", ":input:not(textarea)", function(event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
텍스트 영역 및 제출 버튼에만 Enter 키 허용
<input|button type="submit">
제출 버튼에 Enter 키를 허용하려면 다음과 같이 선택기를 언제든지 수정할 수 있습니다.
$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
// ...
});
다른 답변에서 제안한대로 input[type=text]
은 HTML5 비 텍스트 입력을 다루지 않으므로 좋은 선택자가 아닙니다.
나는 웹 사이트에 대한 설문 조사를하고 있는데, 제출 버튼을 클릭하지 않고 입력을 누르거나 실수로 설문지를 제출하는 것과 관련된 몇 가지 문제가있는 것으로 보입니다. 이것을 막을 수있는 방법이 있습니까?
설문 조사에서 HTML, PHP 5.2.9 및 jQuery를 사용하고 있습니다.
- 입력 또는 버튼에 type = "submit" 을 사용하지 마십시오.
- type = "button" 을 사용하고 js [Jquery / angular / etc]를 사용하여 서버에 양식을 제출하십시오.
나는 모든 답변으로 잘 덮여 있다고 생각하지만, 일부 자바 스크립트 유효성 검사 코드가있는 버튼을 사용하는 경우 Enter 키에 대한 양식의 onkeypress를 설정하여 제출 내용을 예상대로 호출 할 수 있습니다.
<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">
onkeypress JS는 사용자가해야 할 일이 될 수 있습니다. 더 큰 글로벌 변화가 필요 없습니다. 앱을 처음부터 코딩하지 않고 다른 사람의 웹 사이트를 찢어서 다시 테스트하지 않고 수정 한 경우 특히 그렇습니다.
나는 아직 논평 할 수 없다. 그래서 나는 새로운 대답을 게시 할 것이다.
수락 가능한 대답은 ok-ish이지만 numpad enter에서 제출을 중단하지 않았습니다. 적어도 현재 버전의 Chrome. 나는 이것에 키 코드 조건을 변경해야만했다.
if(event.keyCode == 13 || event.keyCode == 169) {...}
멋진 간단한 jQuery 솔루션 :
$("form").bind("keypress", function (e) {
if (e.keyCode == 13) {
return false;
}
});
목표를 달성하는 것이 나의 해결책이며, 그것은 깨끗하고 효과적입니다.
$('form').submit(function () {
if ($(document.activeElement).attr('type') == 'submit')
return true;
else return false;
});
스크립트를 사용하여 실제 제출을 수행하는 경우 다음과 같이 onsubmit 처리기에 "return false"행을 추가 할 수 있습니다.
<form onsubmit="return false;">
자바 스크립트에서 submit ()을 호출하면 이벤트가 트리거되지 않습니다.
약간 CoffeeScript 코드를 추가하고 싶습니다 (필드 테스트하지 않음).
$ ->
$(window).bind 'keypress', (event) ->
if event.keyCode == 13
unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
event.preventDefault()
(네가 unless 절의 멋진 트릭을 좋아하길 바란다.)
여기서 보지 못한 뭔가가 있습니다. 페이지의 요소를 탭 이동할 때 제출 단추에 도달 할 때 Enter 키를 누르면 양식의 onsubmit 처리기가 트리거되지만 MouseEvent 이벤트가 기록됩니다. 다음은 대부분의 자료를 다루는 짧은 해결책입니다.
이것은 jQuery 관련 답변이 아닙니다.
HTML
<form onsubmit="return false;" method=post>
<input type="text" /><br />
<input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
<input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>
자바 스크립트
window.submitMouseOnly=function(evt){
let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}
실제 예제를 찾으려면 다음을 수행 https://jsfiddle.net/nemesarial/6rhogva2/ . https://jsfiddle.net/nemesarial/6rhogva2/
완전히 다른 접근법 :
- 양식의 첫 번째
<button type="submit">
은 Enter 키 를 누르면 활성화됩니다. - 버튼이
style="display:none;
숨겨져 있어도 마찬가지입니다style="display:none;
- 해당 버튼에 대한 스크립트는 제출 프로세스를 중단하는
false
를 반환 할 수 있습니다. - 양식을 제출하기 위해 다른
<button type=submit>
을 가질 수 있습니다. 제출 양식을 계단식으로 작성하기 만하면됩니다. - 실제 제출 버튼이 집중되어있는 동안 Enter 를 누르면 실제 제출 버튼이 활성화됩니다.
-
<textarea>
또는 다른 폼 컨트롤에서 Enter 키를 누르면 정상적으로 동작합니다. -
<input>
폼 컨트롤 내에서 Enter 키를 누르면 첫 번째<button type=submit>
이 트리거되어false
를 반환하므로 아무 일도 일어나지 않습니다.
그러므로:
<form action="...">
<!-- insert this next line immediately after the <form> opening tag -->
<button type=submit onclick="return false;" style="display:none;"></button>
<!-- everything else follows as normal -->
<!-- ... -->
<button type=submit>Submit</button>
</form>
용도:
// Validate your form using the jQuery onsubmit function... It'll really work...
$(document).ready(function(){
$(#form).submit(e){
e.preventDefault();
if(validation())
document.form1.submit();
});
});
function validation()
{
// Your form checking goes here.
}
<form id='form1' method='POST' action=''>
// Your form data
</form>
유일한 차단 제출하지만 <textarea>
에 새 단락 만들기와 같이 Enter 키의 중요한 기능은 없습니다.
window.addEventListener('keydown', function(e){
//set default value for variable that will hold the status of keypress
pressedEnter = false;
//if user pressed enter, set the variable to true
if(event.keyCode == 13)
pressedEnter = true;
//we want forms to disable submit for a tenth of a second only
setTimeout(function(){
pressedEnter = false;
},100)
})
//find all forms
var forms = document.getElementsByTagName('form')
//loop through forms
for(i = 0; i < forms.length; i++){
//listen to submit event
forms[i].addEventListener('submit', function(e){
//if user just pressed enter, stop the submit event
if(pressedEnter == true) {
e.preventDefault();
return false;
}
})
}
이것은 다른 솔루션에 많은 좌절감을 안겨준 후 모든 브라우저에서 저에게 효과적이었습니다. name_space 바깥 쪽 함수는 선언 전역에서 벗어나기위한 것입니다.
$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);
this.stifle = function(event) {
event.cancelBubble;
event.returnValue = false;
if(this.is_ie === false) {
event.preventDefault();
}
return false;
}
this.on_enter = function(func) {
function catch_key(e) {
var enter = 13;
if(!e) {
var e = event;
}
keynum = GetKeyNum(e);
if (keynum === enter) {
if(func !== undefined && func !== null) {
func();
}
return name_space.stifle(e);
}
return true; // submit
}
if (window.Event) {
window.captureEvents(Event.KEYDOWN);
window.onkeydown = catch_key;
}
else {
document.onkeydown = catch_key;
}
if(name_space.is_ie === false) {
document.onkeypress = catch_key;
}
}
}
샘플 사용 :
$(function() {
name_space.on_enter(
function () {alert('hola!');}
);
});
이미 많은 좋은 해답이 있습니다. 단지 UX 관점에서 뭔가를 기여하고 싶습니다. 양식의 키보드 컨트롤은 매우 중요합니다.
질문은 Enter
키를 눌러 제출을 비활성화하는 방법입니다. 무시할 방법이 아닌 전체 응용 프로그램에서 Enter
. 따라서 핸들러를 창이 아닌 양식 요소에 연결하는 것이 좋습니다.
양식 제출에 Enter
를 사용 중지해도 다음 사항이 허용됩니다.
- 제출 버튼에 중점을두면
Enter
를 통해 양식을 제출Enter
. - 모든 필드가 채워지면 양식을 제출하십시오.
-
Enter
를 통해 제출하지 않은 버튼과의 상호 작용.
이것은 단지 상용구이지만 3 가지 조건 모두를 따릅니다.
$('form').on('keypress', function(e) {
// Register keypress on buttons.
$attr = $(e.target).attr('type);
if ($attr === 'button' || $attr === 'submit') {
return true;
}
// Ignore keypress if all fields are not populated.
if (e.which === 13 && !fieldsArePopulated(this)) {
return false;
}
});
특정 입력 만 제출하지 못하도록해야하므로 클래스 선택기를 사용하여 필요시 언제든지이를 "전역"기능으로 사용할 수있었습니다.
<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />
그리고이 jQuery 코드 :
$('.idNoEnter').keydown(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
또는 keydown이 충분하지 않은 경우 :
$('.idNoEnter').on('keypress keydown keyup', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
몇 가지 메모 :
여기서 여러 가지 좋은 답변을 수정하면 Enter 키가 모든 브라우저에서 keydown
에 대해 작동하는 것 같습니다. 대안으로 bind()
를 on()
메소드로 업데이트했다.
저는 모든 선생님과 단점과 성능 토론의 무게를 달아주는 수업 선택자의 큰 팬입니다. 내 이름 지정 규칙은 'idSomething'이며 jQuery가이를 CSS 스타일링과 구분하기 위해 ID로 사용함을 나타냅니다.
폼에 'javascript : void (0);'액션을 제공합니다. 트릭을하는 것 같다.
<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
alert('Hello');
}
});
});
</script>
필자의 경우에는 입력을 중단하고 제출 버튼을 클릭 시뮬레이션해야했습니다. 이것은 우리가 모달 윈도우 (이전 코드 상속)에 있었기 때문에 제출 버튼에 클릭 핸들러가 있었기 때문입니다. 어쨌든 여기에 내 콤보 솔루션이 있습니다.
$('input,select').keypress(function(event) {
// detect ENTER key
if (event.keyCode == 13) {
// simulate submit button click
$("#btn-submit").click();
// stop form from submitting via ENTER key press
event.preventDefault ? event.preventDefault() : event.returnValue = false;
}
});
이 유스 케이스는 특히 IE8을 사용하는 사람들에게 유용합니다.
섹션 4.10.22.2 W3C HTML5 스펙의 묵시적 제출 :
form
요소의 기본 단추 는 양식 소유자 가 해당form
요소 인 트리 순서 의 첫 번째 제출 단추 입니다.사용자 에이전트가 사용자가 암시 적으로 양식을 제출하도록 지원하는 경우 (예 : 일부 플랫폼에서는 텍스트 필드에 포커스가있는 동안 "Enter"키를 눌러 암시 적으로 양식을 제출 함) 기본 단추 에 정의 된 활성화 가있는 양식의 경우 동작 은 사용자 에이전트가 해당 기본 버튼 에서 합성 클릭 활성화 단계 를 실행하게 해야 합니다 .
주 : 따라서 기본 단추 가 사용 불가능한 경우 암시 적 제출 메커니즘이 사용될 때 양식이 제출되지 않습니다. 비활성화 된 경우 버튼에 활성화 동작 이 없습니다.
따라서 폼의 암시 적 제출을 비활성화하는 표준 호환 방법은 비활성화 된 제출 버튼을 양식의 첫 번째 제출 버튼으로 배치하는 것입니다.
<form action="...">
<!-- Prevent implicit submission of the form -->
<button type="submit" disabled style="display: none" aria-hidden="true"></button>
<!-- ... -->
<button type="submit">Submit</button>
</form>
이 접근법의 한 가지 좋은 특징은 JavaScript 없이도 작동한다는 것입니다. JavaScript가 사용되는지 여부에 관계없이 암시 적 양식 제출을 방지하려면 표준 준수 웹 브라우저가 필요합니다.