jquery 비활성화 양식 제출시


207

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

$('form').bind("keypress", function(e) {
  if (e.keyCode == 13) {               
    e.preventDefault();
    return false;
  }
});

입력시 양식 제출을 비활성화하거나 더 나은 방법으로 아약스 양식 제출을 호출하고 싶습니다. 어느 솔루션이든 허용되지만 위의 코드로 양식을 제출할 수 없습니다.


3
다음은 간단한 HTML 전용 솔루션입니다. stackoverflow.com/a/51507806/337934
— SamB

답변:


420

경우 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()


15
jQuery는로 정규화 e.which하므로 테스트 할 필요는 e.keyCode없지만이 문제의 가장 큰 원인은 +1입니다.
— Bojangles

4
return false;이것에 필요 합니까? e.preventDefault();enougth 것 같습니다
— chromigo

10
중대한! 이 솔루션 블록은 텍스트 영역에서 중단됩니다.
— German Khokhlov

4
문제는 텍스트 상자와 같은 양식을 가지고 있다면 텍스트 상자에 enter (새 줄을 만들기 위해)를 추가 할 수 없다는 것입니다.
— Tikky

3
keyCode === 13 && !$(e.target).is('textarea')
— teran

62

일반적 Enter으로 입력 요소에 중점을두면 양식이 제출됩니다 .

양식 내의 입력 요소에서 Enter키 (code 13)를 비활성화 할 수 있습니다 .

$('form input').on('keypress', function(e) {
    return e.which !== 13;
});

데모 : http://jsfiddle.net/bnx96/325/


사용자 지정 자동 완성 입력 필드에서 iOS Go 버튼이 문제였습니다. 이것은 그것을 해결했다.
— Dylan Valade

11
이렇게하면 Enter 키 textareas가 같은 형식 으로 사용되지 않습니다 . $("form input")대신 사용하면 $("form :input")문제가 해결 되는 것 같습니다. 데모 : jsfiddle.net/bnx96/279
— shaneparsons

43

더 짧은 :

$('myform').submit(function() {
  return false;
});

35
그러나 이것은 사용자 클릭도 막을 수 있습니까?
— haibuihoang

5
@haibuihoang 예, 양식 제출이 비활성화됩니다.
— Tom

7
function(e) {e.preventDefault();}이벤트 처리기에서 반환 값으로 사용해야합니다 . stackoverflow.com/a/20045473/601386
— flu

6
@ user1111929 이것은 훌륭하게 작동하지만 버튼으로 Enter양식 제출을 비활성화하는 것에 관한 질문 만하고 질문에 대답하지 않았으므로 최고의 대답은 아닙니다 Submit.
— daveslab

양식 제출을 유지하면서 'enter'키를 눌렀을 때 제출을 비활성화하려는 일반적인 상황은 jQuery onClick이벤트를 사용 하여 양식의 유효성을 검사하고 여전히 jQuery를 사용하여 제출하는 경우입니다. 즉, javascript / jQuery를 통해서만 제출하려는 경우가 있습니다. 이 솔루션으로 AJAX를 계속 사용할 수는 있지만 submit메소드 의 기본 기능을 비활성화합니다 .
— JRad 나쁜


14
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.which == 13) {
    e.preventDefault();
    return false;
  }
});

이 솔루션은 웹 사이트의 모든 양식 (아약스가 삽입 된 양식)에서도 작동하므로 입력 텍스트 입력 만 방지합니다. 문서 준비 기능에 넣고 평생 동안이 문제를 잊어 버리십시오.


9

위의 대부분의 답변은 사용자가 텍스트 영역 필드에 새 줄을 추가하지 못하게합니다. 이것이 피하고 싶은 경우, 현재 어떤 요소에 포커스가 있는지 확인하여이 특정 경우를 제외 할 수 있습니다.

var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
  e.preventDefault();
  return false;
}

8

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


"양식에 하나의 입력 필드 만 있고 해당 필드는 '텍스트'입력"으로 인해 "입력 키에 제출할 양식"카운터에 보이지 않는 입력 상자를 추가했습니다.
— Luo Jiong Hui

6

제출 및 제출 버튼 제출을 비활성화하려면 양식의 onsubmit 이벤트를 사용하십시오.

<form onsubmit="return false;">

"false return"을 JS 함수 호출로 대체하여 필요한 모든 작업을 수행하고 마지막 단계로 양식을 제출할 수 있습니다.


1
제출 버튼 클릭을 포함한 모든 양식 제출이 비활성화됩니다.
— Nick

100 %가 아니라 ... 정기적으로 키를 제출하십시오 ... jquery를 사용하는 것이 가장 좋습니다
— KingRider at

좋은 대체 답변 (위의 경고와 함께) ... 음, 때로는 이것이 당신이 필요한 전부입니다.
— emilys

이것이 바로 상황에 필요한 것입니다. 감사합니다
— shababhsiddique

4

순수 자바 스크립트로 완벽하게 수행 할 수 있으며 간단하고 라이브러리가 필요하지 않습니다. 비슷한 주제에 대한 자세한 답변은 다음과 같습니다. 양식의 Enter 키 비활성화

간단히 말해서, 코드는 다음과 같습니다.

<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true);
</script>

이 코드는 입력 유형 = 'text'에 대해서만 "Enter"키를 방지하기위한 것입니다. (방문객이 페이지에서 Enter 키를 눌러야 할 수도 있기 때문에) 다른 조치에 대해 "Enter"를 사용하지 않으려면 console.log (e); 테스트 목적으로 크롬에서 F12 키를 누르고 "콘솔"탭으로 이동하여 페이지에서 "백 스페이스"를 누르고 내부를 살펴보고 어떤 값이 반환되는지 확인한 다음 해당 매개 변수를 모두 타겟팅하여 코드를 더욱 향상시킬 수 있습니다 에 대한 사용자의 요구에 맞게 위 "e.target.nodeName" , "e.target.type" 그리고 더 많은 ...


2
실제로이어야합니다 e.target.nodeName === 'INPUT' && e.target.type !== 'textarea'. 지정된 코드를 사용하면 라디오 또는 확인란에 초점을 맞춘 경우 양식을 제출할 수 있습니다.
— afnpires

3

이미이 문제를 해결했는지 또는 지금이 문제를 해결하려는 사람은 모르지만 여기에 내 해결책이 있습니다!

$j(':input:not(textarea)').keydown(function(event){
    var kc = event.witch || event.keyCode;
    if(kc == 13){
    event.preventDefault();
        $j(this).closest('form').attr('data-oldaction', function(){
            return $(this).attr('action');
        }).attr('action', 'javascript:;');

        alert('some_text_if_you_want');

        $j(this).closest('form').attr('action', function(){
            return $(this).attr('data-oldaction');
        });
        return false;
    }
});

2

간단한 방법은 HTML에서 버튼 유형을 버튼으로 변경 한 다음 js에 이벤트를 추가하는 것입니다 ...

이것에서 변경 :

<form id="myForm">
   <button type="submit">Submit</button>
</form>

에

<form id="myForm">
   <button type="button" id="btnSubmit">Submit</button>
</form>

그리고 js 또는 jquery에서 다음을 추가하십시오.

("#btnSubmit").click(function () {
    $('#myForm').submit();
});

1

다음 코드는 Enter 키를 사용하여 양식을 제출하지 못하도록하지만 텍스트 영역에서 Enter 키를 계속 사용할 수 있습니다. 필요에 따라 추가로 편집 할 수 있습니다.

<script type="text/javascript">
        function stopRKey(evt) {
          var evt = (evt) ? evt : ((event) ? event : null);
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
          if ((evt.keyCode == 13) && ((node.type=="text") || (node.type=="radio") || (node.type=="checkbox")) )  {return false;}
        }

        document.onkeypress = stopRKey;
</script> 

1

파이어 폭스에서 입력 할 때 Enter 키를 누르면 상단 형식으로 제출됩니다. 해결책은 다음을 추가하여 제출 양식에 있습니다.

<input type="submit" onclick="return false;" style="display:none" />

1

3 년 후 한 사람이이 질문에 완전히 대답하지 않았습니다.

asker는 기본 양식 제출을 취소하고 자체 Ajax를 호출하려고합니다. 간단한 솔루션으로 간단한 요청입니다. 각 입력에 입력 된 모든 문자를 가로 챌 필요는 없습니다.

양식에 a <button id="save-form">또는 a에 관계없이 제출 단추가 있다고 가정하면 다음을 <input id="save-form" type="submit">수행하십시오.

$("#save-form").on("click", function () {
    $.ajax({
        ...
    });
    return false;
});


-2

파일이 완료되면 (로드 완료) 스크립트는 "Entry"키에 대한 각 이벤트를 감지하고 이벤트를 비활성화합니다.

<script>
            $(document).ready(function () {
                $(window).keydown(function(event){
                    if(event.keyCode == 13) {
                        e.preventDefault(); // Disable the " Entry " key
                        return false;               
                    }
                });
            });
        </script>

설명 추가
— HaveNoDisplayName

@HaveNoDisplayName : 업데이트되었습니다.
— McNavy

-4

모든 브라우저를위한 JavaScript의 완벽한 솔루션

위의 코드와 대부분의 솔루션은 완벽합니다. 그러나, 나는 가장 좋아하는 "짧은 답변"이 불완전하다고 생각합니다.

여기에 전체 답변이 있습니다. IE 7을 기본으로 지원하는 JavaScript로도 제공됩니다.

var form = document.getElementById("testForm");
form.addEventListener("submit",function(e){e.preventDefault(); return false;});

이 솔루션은 이제 사용자가 Enter 키를 사용하여 제출하지 못하게하고 양식이 아래 어딘가에 있으면 페이지를 다시로드하거나 페이지 상단으로 이동하지 않습니다.


8
또한 "제출"버튼을 클릭하면 양식이 제출되지 않습니다.
— 마리오 베르너

-10

이건 어때요:

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

앱에서 제출 버튼이있는 모든 양식을 비활성화해야합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.