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;
}

이제 폼에서 키 누르기 핸들러를 정의할 수 있습니다.
[...] ="이벤트)" <back [...] onkeypress="return checkEnter(이벤트)">>

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

다음은 jQuery 핸들러입니다.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'/>javascript를하여 javascript를 입력합니다.<input type='submit' />의 범위 내에서<noscript>javascript-disabled는 ENTER를 사용합니다.이 경우 원하는 동작이 무엇인지 결정하는 것은 OP에 달려 있습니다.

javascript를 실행하지 않고서는 이 작업을 수행할 수 없습니다.

한마디로 Javascript는 다음과 같습니다.

<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)를 추가합니다.테스트를 위해 console.log(e)를 입력하고 크롬으로 F12를 누른 후 페이지에서 "console" 탭으로 이동하여 "backspace"를 눌러 반환되는 값을 확인합니다.이러한 모든 파라미터를 타겟으로 하여 "targ"에 적합하도록 설정할 수 있습니다.et.nodeName", "e.target.type" 등...

유사한 질문에 대한 자세한 답변은 여기를 참조하십시오.

예전에는 위와 같은 키 누르기 핸들러로 항상 해왔지만, 오늘은 좀 더 간단한 해결책이 나왔습니다.Enter 키는 폼의 첫 번째 비디세이블 전송 버튼을 트리거하기 때문에 실제로 필요한 것은 전송하려는 버튼을 가로채는 것입니다.

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

바로 그겁니다.키 입력은 브라우저/필드 등에 의해 정상적으로 처리됩니다.Enter-Submit 로직이 트리거되면 브라우저는 숨겨진 전송 버튼을 찾아 트리거합니다.그리고 Javascript 핸들러가 제출을 막습니다.

이 주제, 여기 또는 다른 게시물에서 찾은 모든 답변에는 하나의 단점이 있습니다. 그것은 폼 요소에 대한 실제 변경 트리거를 막는 것입니다.따라서 이러한 솔루션을 실행하면 변경 이벤트도 트리거되지 않습니다.저는 이 문제를 해결하기 위해 이 코드들을 수정하고 다음 코드를 자체 개발했습니다.이것이 다른 사람들에게 유용하게 쓰였으면 좋겠다."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");
        }
    });
});

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는 사용하지 않는 것이 좋습니다.

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

폼 태그에 'onSubmit' 이벤트를 기록합니다.

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

Javascript 함수를 다음과 같이 작성합니다.

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

     } 

     (OR)

이유야 어떻든 Enter 키를 눌러 폼 제출을 방지하려면 다음 기능을 javascript로 작성하면 됩니다.

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

감사해요.

입력 시 양식 제출을 방지하려면textarea ★★★★★★★★★★★★★★★★★」input필드에서 이벤트를 전송한 요소의 유형을 검색하려면 전송 이벤트를 확인합니다.

예 1

HTML

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

j쿼리

$(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>

j쿼리

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

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

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

이것은 보다 심플하고 편리합니다.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"/>

에 추가해 주세요.onsubmit="return 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>

javascript의 폼에 키다운을 고정하여 거품이 일지 않도록 할 수 있다고 생각합니다.기본적으로 웹 페이지의 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

}

다른 '이름' 값을 가진 여러 개의 제출 버튼이 있기 때문에 같은 php 파일에서 다른 작업을 수행할 수 있습니다.enterreturn버튼을 누르면 값이 전송되지 않기 때문에 이 문제가 해결됩니다.해 봤는데, '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아...enterreturn버튼은 폼의 첫 번째 제출 버튼을 활성화합니까?이렇게 하면 숨겨진 'vanilla' 제출 버튼이나 실행 중인 php 파일을 폼이 있는 페이지로 되돌리는 '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>

버튼의 이름을 올바르게 지정하기만 하면 계속 전송되지만, 텍스트 필드(복귀 버튼을 누르면 explicit Original Target)에는 올바른 이름이 없습니다.

이러한 답변 중 어느 것도 도움이 되지 않는 경우는, 이것을 사용해 주세요.실제로 양식을 제출하는 버튼 앞에 제출 버튼을 추가하고 이벤트에 대해 아무 작업도 수행하지 않습니다.

HTML

<!-- The following button is meant to do nothing. This button will catch the "enter" key press and stop it's propagation. -->
<button type="submit" id="EnterKeyIntercepter" style="cursor: auto; outline: transparent;"></button>

자바스크립트

$('#EnterKeyIntercepter').click((event) => {
    event.preventDefault(); //The buck stops here.
    /*If you don't know what this if statement does, just delete it.*/
    if (process.env.NODE_ENV !== 'production') {
        console.log("The enter key was pressed and captured by the mighty Enter Key Inceptor (⌐■_■)");
    }
});

이건 나한테 효과가 있었어.
onkeydown="return !"(이벤트).키코드==13)"

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

   </form>

방법은 다음과 같습니다.

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

javascript 외부 파일에 저장하다

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

    if (event.keyCode == 13) {

        return false;
    }
});

 })(jQuery);

아니면 몸통 태그 안쪽 어딘가에

<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만약 그가 폼을 유지하기로 결정한다면요.

언급URL : https://stackoverflow.com/questions/585396/how-to-prevent-enter-keypress-to-submit-a-web-form