내 페이지에 다음과 같은 자바 스크립트가 있는데 작동하지 않는 것 같습니다.
$('form').bind("keypress", function(e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}
});
입력시 양식 제출을 비활성화하거나 더 나은 방법으로 아약스 양식 제출을 호출하고 싶습니다. 어느 솔루션이든 허용되지만 위의 코드로 양식을 제출할 수 없습니다.
답변
경우 keyCode
적발되지 않으며, 캐치 which
:
$('#formid').on('keyup keypress', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
return false;
}
});
편집 : 그것을 놓쳤다, keyup
대신에 사용하는 것이 좋습니다keypress
편집 2 : 일부 최신 버전의 Firefox에서와 같이 양식 제출이 방지되지 않으므로 키 누르기 이벤트를 양식에 추가하는 것이 더 안전합니다. 또한 이벤트를 “name”양식에 바인딩하고 양식 ID에만 바인딩하여 작동하지 않습니다 (더 이상?). 따라서 코드 예제를 적절하게 변경하여이를보다 명확하게했습니다.
편집 3 : 변경 bind()
에on()
답변
일반적 Enter으로 입력 요소에 중점을두면 양식이 제출됩니다 .
양식 내의 입력 요소에서 Enter키 (code 13
)를 비활성화 할 수 있습니다 .
$('form input').on('keypress', function(e) {
return e.which !== 13;
});
데모 : http://jsfiddle.net/bnx96/325/
답변
더 짧은 :
$('myform').submit(function() {
return false;
});
답변
$('form').keyup(function(e) {
return e.which !== 13
});
event.which 속성은 event.keyCode 및 event.charCode을 정상화. 키보드 키 입력을위한 이벤트를 시청하는 것이 좋습니다.
답변
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
if(e.which == 13) {
e.preventDefault();
return false;
}
});
이 솔루션은 웹 사이트의 모든 양식 (아약스가 삽입 된 양식)에서도 작동하므로 입력 텍스트 입력 만 방지합니다. 문서 준비 기능에 넣고 평생 동안이 문제를 잊어 버리십시오.
답변
위의 대부분의 답변은 사용자가 텍스트 영역 필드에 새 줄을 추가하지 못하게합니다. 이것이 피하고 싶은 경우, 현재 어떤 요소에 포커스가 있는지 확인하여이 특정 경우를 제외 할 수 있습니다.
var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
e.preventDefault();
return false;
}
답변
ENTER 키에 대한 모든 키 입력을 캡처하고 테스트 해야하는 과도한 노력으로 인해 실제로 버그가 발생하므로 솔루션은 다음 브라우저 동작에 의존합니다.
ENTER를 누르면 제출 버튼 에서 클릭 이벤트 가 발생 합니다 (IE11, Chrome 38, FF 31에서 테스트). ** (참조 : http://mattsnider.com/how-forms-submit-when-pressing-enter/ )
따라서 내 솔루션은 표준 제출 버튼 (즉 <input type="submit">
) 을 제거하여 ENTER를 누를 때 마술처럼 클릭 할 제출 버튼이 없기 때문에 위의 동작이 실패하도록하는 것입니다. 대신 일반 버튼에서 jQuery 클릭 핸들러를 사용하여 jQuery의 .submit()
메소드 를 통해 양식을 제출합니다 .
<form id="myform" method="post">
<input name="fav_color" type="text">
<input name="fav_color_2" type="text">
<button type="button" id="form-button-submit">DO IT!</button>
</form>
<script>
$('#form-button-submit').click(function(){
$('#myform').submit();
});
</script>
데모 : http://codepen.io/anon/pen/fxeyv?editors=101
** 양식에 하나의 입력 필드 만 있고 해당 필드가 ‘텍스트’입력 인 경우에는이 동작을 적용 할 수 없습니다. 이 경우 HTML 마크 업에 제출 버튼이없는 경우에도 (예 : 검색 필드) ENTER 키에 양식이 제출됩니다. 이것은 90 년대 이후 표준 브라우저 동작이었습니다.