[javascript] jquery 비활성화 양식 제출시

내 페이지에 다음과 같은 자바 스크립트가 있는데 작동하지 않는 것 같습니다.

$('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을 정상화. 키보드 키 입력을위한 이벤트를 시청하는 것이 좋습니다.

which 문서.


답변

$(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 년대 이후 표준 브라우저 동작이었습니다.