ENTER 키를 눌러 웹 양식을 제출하지 못하게하는 방법은 무엇입니까?

ENTER웹 기반 응용 프로그램에서 키 누르기가 양식을 제출 하지 못하게하려면 어떻게합니까 ?

[ 개정 2012, 인라인 핸들러 없음, 텍스트 영역 입력 처리 유지]

function checkEnter(e){
 e = e || event;
 var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
 return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

이제 <form [...] onkeypress = "return checkEnter (event)"> 형식으로 키 누르기 핸들러를 정의 할 수 있습니다.

document.querySelector('form').onkeypress = checkEnter;

다음은 제출 제출을 중지하고 백 스페이스 키-> 뒤로를 중지하는 데 사용할 수있는 jQuery 핸들러입니다. "keyStop"객체의 (keyCode : selectorString) 쌍은 기본 동작을 실행하지 않아야하는 노드를 일치시키는 데 사용됩니다.

웹은 접근하기 쉬운 장소 여야하며 이는 키보드 사용자의 기대를 상회하고 있습니다. 내 경우에는 작업중 인 웹 응용 프로그램이 뒤로 버튼을 좋아하지 않으므로 키 바로 가기를 비활성화하는 것이 좋습니다. "입력해야합니다-> 제출"토론은 중요하지만 실제 질문과는 관련이 없습니다.

접근성에 대해 생각하고 실제로 왜 그렇게하고 싶은지에 대한 코드는 다음과 같습니다!

$(function(){
 var keyStop = {
   8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
   13: "input:text, input:password", // stop enter = submit 

   end: null
 };
 $(document).bind("keydown", function(event){
  var selector = keyStop[event.which];

  if(selector !== undefined && $(event.target).is(selector)) {
      event.preventDefault(); //stop event
  }
  return true;
 });
});

제출시 핸들러에서 단순히 false를 리턴하십시오.

<form onsubmit="return false;">

또는 중간에 처리기를 원한다면

<script>
var submitHandler = function() {
  // do stuff
  return false;
}
</script>
<form onsubmit="return submitHandler()">

//Turn off submit on "Enter" key

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        $("#btnSearch").attr('value');
        //add more buttons here
        return false;
    }
});

폼의 기본 제출 동작을 취소하면이 함수를 호출해야합니다. 모든 입력 필드 또는 이벤트에 첨부 할 수 있습니다.

function doNothing() {  
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if( keyCode == 13 ) {


    if(!e) var e = window.event;

    e.cancelBubble = true;
    e.returnValue = false;

    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}

ENTER 키는 양식의 기본 제출 버튼 만 활성화합니다.

<input type="submit" />

브라우저는 양식 내에서 찾습니다.

따라서 제출 버튼이 없지만 다음과 같은 것이 있습니다.

<input type="button" value="Submit" onclick="submitform()" /> 

편집 : 의견 토론에 대한 답변 :

텍스트 필드가 하나만 있으면 작동하지 않지만이 경우 원하는 동작 일 수 있습니다.

다른 문제는 양식을 제출하기 위해 Javascript에 의존한다는 것입니다. 접근성의 관점에서 문제가 될 수 있습니다. <input type='button'/>with with javascript 를 작성한 다음 태그 <input type='submit' />안에 넣어서 해결할 수 있습니다 <noscript>. 이 방법의 단점은 자바 스크립트가 비활성화 된 브라우저의 경우 ENTER에 양식을 제출한다는 것입니다. 이 경우 원하는 동작을 결정하는 것은 OP에 달려 있습니다.

나는 자바 스크립트를 전혀 호출하지 않고이 작업을 수행 할 수있는 방법을 모른다.

순수한 자바 스크립트의 짧은 대답은 다음과 같습니다.

<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" 등에 대한 귀하의 요구에 적합합니다 .

비슷한 질문에 대한 자세한 답변을 보려면 여기를 클릭하십시오.

이 주제, 여기 또는 다른 게시물에서 찾은 모든 답변에는 한 가지 단점이 있으며 이는 양식 요소의 실제 변경 트리거를 방지합니다. 따라서 이러한 솔루션을 실행하면 onchange 이벤트도 트리거되지 않습니다. 이 문제를 극복하기 위해 이러한 코드를 수정하고 다음 코드를 직접 개발했습니다. 나는 이것이 다른 사람들에게 유용하기를 바랍니다. "prevent_auto_submit"형식의 클래스를 제공하고 다음 JavaScript를 추가했습니다.

$(document).ready(function() 
{
    $('form.prevent_auto_submit input,form.prevent_auto_submit select').keypress(function(event) 
    { 
        if (event.keyCode == 13)
        {
            event.preventDefault();
            $(this).trigger("change");
        }
    });
});

나는 항상 과거에 위와 같은 키 누르기 핸들러로 그것을 해왔지만 오늘은 더 간단한 해결책을 강타했습니다. Enter 키는 양식에서 비활성화되지 않은 첫 번째 제출 단추를 트리거하므로 실제로 필요한 것은 제출하려는 단추를 가로채는 것입니다.

<form>
  <div style="display: none;">
    <input type="submit" name="prevent-enter-submit" onclick="return false;">
  </div>
  <!-- rest of your form markup -->
</form>

그게 다야. 키 누르기는 브라우저 / 필드 / 등에서 평소와 같이 처리됩니다. 입력 제출 논리가 트리거되면 브라우저는 숨겨진 제출 단추를 찾아서 트리거합니다. 그러면 자바 스크립트 핸들러는 서브 미션을 방지합니다.

IE8,9,10, Opera 9+, Firefox 23, Safari (PC) 및 Safari (MAC) 용 크로스 브라우저를 만드는 데 시간을 보냈습니다.

JSFiddle 예 : http://jsfiddle.net/greatbigmassive/ZyeHe/

기본 코드-양식에 첨부 된 "onkeypress"를 통해이 함수를 호출하고 "window.event"를 전달하십시오.

function stopEnterSubmitting(e) {
    if (e.keyCode == 13) {
        var src = e.srcElement || e.target;
        if (src.tagName.toLowerCase() != "textarea") {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        }
    }
}

stopSubmitOnEnter (e) {
  var eve = e || window.event;
  var keycode = eve.keyCode || eve.which || eve.charCode;

  if (keycode == 13) {
    eve.cancelBubble = true;
    eve.returnValue = false;

    if (eve.stopPropagation) {   
      eve.stopPropagation();
      eve.preventDefault();
    }

    return false;
  }
}

그런 다음 양식에 :

<form id="foo" onkeypress="stopSubmitOnEnter(e);">

그러나 눈에 잘 띄지 않는 JavaScript를 사용하지 않는 것이 좋습니다.

제 경우에는이 jQuery JavaScript가 문제를 해결했습니다.

jQuery(function() {
            jQuery("form.myform").submit(function(event) {
               event.preventDefault();
               return false;
            });
}

"ENTER"가 양식을 제출하지 못하게하면 일부 사용자에게 불편을 줄 수 있습니다. 따라서 아래 절차를 따르면 더 좋습니다.

양식 태그에 'onSubmit'이벤트를 작성하십시오.

<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
 ....
 ....
 ....
</form>

다음과 같이 Javascript 함수를 작성하십시오.

function testSubmit(){
  if(jQuery("#formId").valid())
      {
        return true;
      }
       return false;

     } 

     (OR)

이유가 무엇이든, Enter 키를 눌렀을 때 양식 제출을 막으려면 다음 함수를 자바 스크립트로 작성할 수 있습니다.

    $(document).ready(function() {
          $(window).keydown(function(event){
          if(event.keyCode == 13) {
               event.preventDefault();
               return false;
              }
           });
         });

감사.

이 태그를 양식에 추가하십시오. onsubmit="return false;" 그러면 JavaScript 함수를 사용하여 양식을 제출할 수 있습니다.

누르면 양식을 제출 방지하기 위해 enterA의 textarea또는 input필드에이 요소의 종류가 이벤트를 보낼 것을 찾기 위해 이벤트를 제출 확인.

실시 예 1

HTML

<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.type!=="submit") {
        e.preventDefault();
    }
});

더 좋은 해결책은 제출 버튼이없고 일반 버튼으로 이벤트를 시작하는 것입니다. 첫 번째 예에서는 2 개의 제출 이벤트가 발생하지만 두 번째 예에서는 1 개의 제출 이벤트 만 발생하기 때문에 더 좋습니다.

실시 예 2

HTML

<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.localName!=="button") {
        e.preventDefault();
    }
});

이보다 더 간단하고 유용합니다. : D

$(document).on('submit', 'form', function(e){
    /* on form submit find the trigger */
    if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
        /* if the trigger is not between selectors list, return super false */
        e.preventDefault();
        return false;
    } 
});

어때요?

<asp:Button ID="button" UseSubmitBehavior="false"/>

이 기사를 확인하십시오 웹 양식을 제출하기 위해 ENTER 키 누르기를 방지하는 방법은 무엇입니까?

$(“.pc_prevent_submit”).ready(function() {
  $(window).keydown(function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class=”pc_prevent_submit” action=”” method=”post”>
  <input type=”text” name=”username”>
  <input type=”password” name=”userpassword”>
  <input type=”submit” value=”submit”>
</form>

자바 스크립트로 양식에 키 다운을 붙일 수 있고 거품을 방지 할 수 있다고 생각합니다. 웹 페이지의 ENTER는 기본적으로 현재 선택된 컨트롤이 배치 된 양식을 제출합니다.

이 링크는 Chrome, FF 및 IE9에서 저에게 효과적 인 솔루션과 IE9의 개발자 도구 (F12)와 함께 제공되는 IE7 및 8의 에뮬레이터를 제공합니다.

http://webcheatsheet.com/javascript/disable_enter_key.php

또 다른 방법은 제출 입력 버튼을 제출해야 할 때만 양식에 추가하고 양식 작성 중에 간단한 div로 대체하는 것입니다.

이 속성을 FORM 태그에 추가하면됩니다.

onsubmit="return gbCanSubmit;"

그런 다음 SCRIPT 태그에 다음을 추가하십시오.

var gbCanSubmit = false;

그런 다음 버튼을 만들거나 함수와 같은 다른 이유로 최종 제출을 허용하면 전역 부울을 뒤집고 다음 예제와 같이 .submit () 호출을 수행하십시오.

function submitClick(){

  // error handler code goes here and return false if bad data

  // okay, proceed...
  gbCanSubmit = true;
  $('#myform').submit(); // jQuery example

}

다른 'name'값을 가진 여러 개의 제출 버튼이 있으므로 제출했을 때 동일한 PHP 파일에서 다른 작업을 수행하기 때문에이 문제를 직접 경험했습니다. enter/의 return그 값으로 버튼 바꿈이 제출되지 않습니다. 그래서 enter/ return버튼은 양식의 첫 번째 제출 버튼을 활성화합니까? 이렇게하면 숨겨 지거나 'name'값이있는 'vanilla'제출 버튼을 사용하여 실행중인 PHP 파일을 양식이있는 페이지로 되돌릴 수 있습니다. 그렇지 않으면 키 누르기가 활성화하는 기본 (숨겨진) 'name'값이 있고 제출 단추가 자체 'name'값으로 겹쳐 씁니다. 그냥 생각이야

어때요?

<script>
function isok(e) {
  var name = e.explicitOriginalTarget.name;
  if (name == "button") {
    return true
  }
  return false;
}
</script>
<form onsubmit="return isok(event);">
<input type="text" name="serial"/>
<input type="submit" name="button" value="Create Thing"/>
</form>

버튼 이름을 오른쪽으로 지정해도 여전히 제출되지만 텍스트 필드, 즉 returnO를 입력하면 explicitOriginalTarget과 같은 텍스트 필드는 올바른 이름을 갖지 않습니다.

이것은 나를 위해 일했습니다.
onkeydown = "반환! (event.keyCode == 13)"

    <form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">

   </form>

내가하는 방법은 다음과 같습니다.

window.addEventListener('keydown', function(event)
{
    if (event.key === "Enter")
    {
        if(event.target.type !== 'submit')
        {
            event.preventDefault();
            return false;
        }
    }
}

자바 스크립트 외부 파일에 넣어

   (function ($) {
 $(window).keydown(function (event) {  

    if (event.keyCode == 13) {

        return false;
    }
});

 })(jQuery);

또는 body 태그 내부 어딘가에

<script>


$(document).ready(function() {
    $(window).keydown(function(event) {
        alert(1);

        if(event.keyCode == 13) {

            return false;
        }
    });
});

</script>

나는 같은 문제가 있었다 (많은 텍스트 필드와 숙련되지 않은 사용자를 가진 양식).

나는 이런 식으로 그것을 해결했다 :

function chkSubmit() {
    if (window.confirm('Do you want to store the data?')) {
        return true;
    } else {
        // some code to focus on a specific field
        return false;
    }
}

HTML 코드에서 이것을 사용하여 :

<form
    action="go.php" 
    method="post"
    accept-charset="utf-8"  
    enctype="multipart/form-data"
    onsubmit="return chkSubmit()"
>

이러한 방식으로 ENTER키가 계획대로 작동하지만 확인 ( ENTER보통 두 번째 탭)이 필요합니다.

나는 ENTER양식을 유지하기로 결정한 경우 사용자가 누르는 필드에서 사용자를 보내는 스크립트에 대한 퀘스트를 독자들에게 맡깁니다 .