Enter 키를 눌러 사용자가 양식을 제출하지 못하도록 방지

웹 사이트에 설문 조사가 있는데 제출 버튼을 클릭하지 않고 사용자가 Enter 키를 누르고 (이유를 모르겠습니다) 실수로 설문 조사 (양식)를 제출하는 데 문제가있는 것 같습니다. 이것을 막을 방법이 있습니까?

설문에 HTML, PHP 5.2.9 및 jQuery를 사용하고 있습니다.

다음과 같은 방법을 사용할 수 있습니다

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

원래 게시물에 대한 주석을 읽을 때 더 유용하게 사용하고 Enter모든 필드를 완료 하면 사람들이 누를 수 있도록 하십시오.

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

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

어디서나 Enter 키를 허용하지 마십시오

<textarea>양식 이 없으면 다음에 추가하십시오.<form> .

<form ... onkeydown="return event.key != 'Enter';">

또는 jQuery를 사용하여 :

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

그러면 양식 내부의 모든 키 누름이에서 확인됩니다 key. 이 아닌 경우 Enter반환 true되고 평소대로 계속 진행됩니다. 이 인 경우 Enter반환 false되고 즉시 중지되며 양식이 제출되지 않습니다.

keydown이벤트는 이상이 바람직하다 keyup(가)으로 keyup너무 늦게 블록 형태로 제출한다. 역사적으로에도 keypress있었지만, 마찬가지로 더 이상 사용되지 않습니다 KeyboardEvent.keyCode. KeyboardEvent.key대신 누른 키 이름을 반환하는 대신 사용해야합니다 . 이 Enter옵션을 선택 하면 13 (정상 입력)과 108 (숫자 입력)을 확인합니다.

참고 그 $(window)어떤 다른 답변에서 제안 대신으로 $(document)아니 작업을 수행합니다 keydown/ keyup당신이 아니라 불쌍한 사용자를 포함하는 같이 인 경우에 그래서의 안 좋은 선택, IE <= 8.

텍스트 영역에서만 키 입력 허용

당신이있는 경우 <textarea>양식에 (이 당연히 해야 다음 아닌 모든 개별 입력 요소에를 keyDown 처리기를 추가, Enter 키를 동의) <textarea>.

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

상용구를 줄이려면 jQuery를 사용하는 것이 좋습니다.

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

어떤 이유로 든 입력 키에 다른 이벤트 핸들러 함수가 첨부되어 있고 Enter 키를 호출하려는 경우 false를 반환하는 대신 이벤트의 기본 동작 만 방지하므로 다른 핸들러로 올바르게 전파 할 수 있습니다.

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

텍스트 영역에서 키 입력 및 제출 버튼 만 허용

제출 버튼 <input|button type="submit">에서도 Enter 키를 허용 하려면 아래처럼 항상 선택기를 세분화 할 수 있습니다.

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

참고 input[type=text]일부 다른 답변에 제안 그래서의 안 좋은 선택, 그 HTML5의 텍스트가 아닌 입력을 적용되지 않습니다.

4.10.22.2 섹션 W3C HTML5 사양의 암시 적 제출 은 다음과 같습니다.

form요소의 기본 버튼은 (가) 첫 번째 단추를 제출 에 나무 위해서는 그 형태 소유자 즉 form요소입니다.

사용자 에이전트가 사용자가 양식을 암시 적으로 제출할 수 있도록 지원하는 경우 (예를 들어, 텍스트 필드에 포커스가있는 동안 "enter"키를 치는 일부 플랫폼에서 양식은 암시 적으로 양식을 제출 함) 기본 단추 가 정의 된 활성화 된 양식에 대해 수행 이 동작으로 인해 사용자 에이전트 는 해당 기본 버튼 에서 합성 클릭 활성화 단계 를 실행 해야 합니다 .

참고 : 따라서 기본 단추 를 사용하지 않으면 이러한 암시 적 제출 메커니즘을 사용할 때 양식이 제출되지 않습니다. 비활성화 된 버튼은 활성화 동작 이 없습니다 .

따라서 양식의 암시 적 제출을 비활성화하는 표준 준수 방법은 비활성화 된 제출 버튼을 양식의 첫 번째 제출 버튼으로 배치하는 것입니다.

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

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

이 접근법의 한 가지 좋은 특징은 JavaScript없이 작동한다는 것입니다 . JavaScript의 사용 가능 여부에 관계없이 암시적인 양식 제출을 방지하려면 표준을 준수하는 웹 브라우저가 필요합니다.

양식을 제출하지 않으려면 키 누르기와 관련된 세 가지 이벤트를 모두 잡아야했습니다.

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

위의 모든 것을 멋진 컴팩트 버전으로 결합 할 수 있습니다.

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

스크립트를 사용하여 실제 제출을 수행하는 경우 다음과 같이 onsubmit 핸들러에 "return false"행을 추가 할 수 있습니다.

<form onsubmit="return false;">

JavaScript 양식에서 submit ()을 호출해도 이벤트가 트리거되지 않습니다.

사용하다:

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

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

사용자가 Enter부 자연스럽게 보일 수있는 을 누르는 대신 양식을 그대로두고 클라이언트 측 유효성 검사를 추가 할 수 있습니다. 설문 조사가 완료되지 않으면 결과가 서버로 전송되지 않고 사용자에게 멋진 메시지가 표시됩니다. 양식을 작성하기 위해 완료해야 할 사항. jQuery를 사용하는 경우 유효성 검사 플러그인을 사용해보십시오.

http://docs.jquery.com/Plugins/Validation

Enter버튼을 잡는 것보다 더 많은 작업이 필요 하지만,보다 풍부한 사용자 경험을 제공 할 것입니다.

좋은 간단한 작은 jQuery 솔루션 :

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

아직 댓글을 달 수 없으므로 새 답변을 게시하겠습니다.

허용되는 답변은 괜찮지 만 숫자 입력시 제출을 중단하지 않았습니다. Chrome의 현재 버전 이상. 키 코드 조건을 이것으로 변경해야 작동합니다.

if(event.keyCode == 13 || event.keyCode == 169) {...}

목표에 도달하는 것이 나의 해결책이며, 깨끗하고 효과적입니다.

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});

완전히 다른 접근법 :

1. <button type="submit">를 누르면 양식 의 첫 번째 가 활성화됩니다Enter .
2. 버튼이 숨겨져 있어도 마찬가지입니다. style="display:none;
3. 해당 버튼의 스크립트는 false 하여 제출 프로세스를 중단 .
4. 다른 <button type=submit>양식을 제출할 수 있습니다 . true제출물을 계단식으로 돌아 가기 만하면 됩니다.
5. Enter실제 제출 버튼에 초점을 맞춘 상태에서를 누르면 실제 제출 버튼이 활성화됩니다.
6. Enter내부 <textarea>또는 다른 양식 컨트롤을 누르면 정상적으로 작동합니다.
7. 양식 컨트롤 Enter내부를 누르면 <input>첫 번째가 트리거되어을 <button type=submit>반환 false하므로 아무 일도 일어나지 않습니다.

그러므로:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

양식에 'javascript : void (0);'조치 제공 트릭을 수행하는 것 같습니다

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

제출 버튼을 넣지 않으면 할 수 있습니다. 입력에 스크립트를 입력 (type = button)하거나 양식에 데이터를 제출하려면 eventListener를 추가하십시오.

오히려 이것을 사용하십시오

<input type="button">

이것을 사용하는 것보다

<input type="submit">

1. 입력 또는 버튼에 type = "submit" 을 사용하지 마십시오 .
2. 사용 유형 = "버튼" 사용 JS는 [JQuery와 / 각도 / 기타] 서버에 양식을 제출합니다.

특정 입력 만 제출하지 못하도록해야했기 때문에 클래스 선택기를 사용하여 필요할 때마다 "전역"기능으로 만들었습니다.

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

그리고이 jQuery 코드 :

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

또는 키 다운이 충분하지 않은 경우 :

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

몇 가지 참고 사항 :

여기에 다양한 좋은 답변을 수정하면 Enter키 keydown가 모든 브라우저 에서 작동하는 것 같습니다 . 대안으로, 나는 방법으로 업데이트 bind()했다 on().

나는 모든 장단점과 성과 토론의 무게를 재는 클래스 선택기의 팬입니다. 내 이름 지정 규칙은 jQuery가 ID를 CSS 스타일링과 구분하여 ID로 사용하고 있음을 나타내는 'idSomething'입니다.

JavaScript 메소드를 작성하여 Enter키가 눌 렸는지 확인하고 눌렀다면 제출을 중지 할 수 있습니다.

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

submit 메소드에서 호출하십시오.

블록 만 제출하지만 Enter 키의 다른 중요한 기능은 다음과 <textarea>같습니다.

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}

input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}

<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>

이것은 완벽한 방법입니다. 페이지에서 리디렉션되지 않습니다

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});

"ajax textfields"(Yii CGridView)와 하나의 제출 버튼이있는 그리드가있는 비슷한 문제가있었습니다. 텍스트 필드를 검색 할 때마다 제출 된 양식을 입력하십시오. 뷰 (MVC 패턴) 사이의 유일한 공통 버튼이기 때문에 버튼으로 무언가를해야했습니다. 내가해야 할 일은 제거 type="submit"하고 넣는 것뿐 이었습니다onclick="document.forms[0].submit()

모든 답변에 잘 설명되어 있다고 생각하지만 JavaScript 유효성 검사 코드가있는 버튼을 사용하는 경우 Enter를 양식의 onkeypress로 설정하여 제출을 예상대로 호출 할 수 있습니다.

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

onkeypress JS는 당신이해야 할 일이 될 수 있습니다. 더 큰 글로벌 변화가 필요하지 않습니다. 앱을 처음부터 코딩하는 사람이 아니고 다른 사람의 웹 사이트를 찢고 다시 테스트하지 않고 고치게 된 경우 특히 그렇습니다.

여기에 좋은 답변이 많이 있습니다. UX 관점에서 무언가를 기고하고 싶습니다. 형태의 키보드 컨트롤은 매우 중요합니다.

문제는 keypress에서 제출을 비활성화하는 방법 Enter입니다. Enter전체 응용 프로그램에서 무시하는 방법이 아닙니다 . 따라서 창이 아닌 양식 요소에 처리기를 연결하는 것이 좋습니다.

Enter양식 제출을 사용 중지 하면 여전히 다음을 허용해야합니다.

1. Enter제출 버튼이 초점이 맞춰질 때 를 통한 양식 제출 .
2. 모든 필드가 채워지면 양식 제출
3. 과의 상호 작용을 통해 버튼 이외의 제출 Enter.

이것은 상용구이지만 세 가지 조건을 모두 따릅니다.

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

내가 보지 못한 부분은 여기에 있습니다. 페이지의 요소를 Enter탭할 때 제출 버튼에 도달 할 때 누르면 양식에서 onsubmit 처리기가 트리거되지만 이벤트는 MouseEvent로 기록됩니다. 대부분의 기지를 다루는 짧은 해결책은 다음과 같습니다.

이것은 jQuery 관련 답변이 아닙니다.

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

자바 스크립트

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

실제 예제를 찾으려면 https://jsfiddle.net/nemesarial/6rhogva2/

내 경우에는 ENTER를 눌러 양식을 제출하지 말고 제출 버튼 클릭을 시뮬레이션해야했습니다. 제출 버튼에 클릭 핸들러가 있었기 때문입니다. 왜냐하면 우리는 모달 창 (이전 코드 상속) 내에 있었기 때문입니다. 어쨌든 여기에 대한 나의 콤보 솔루션이 있습니다.

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

이 사용 사례는 특히 IE8을 사용하는 사람들에게 유용합니다.

이것은 나를 위해 작동

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});

작은 CoffeeScript 코드를 추가하고 싶습니다 (현장 테스트되지 않음).

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(당신이 without 절의 좋은 트릭을 좋아하기를 바랍니다.)

Javascript 사용 (입력 필드를 확인하지 않고) :

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

누군가 특정 유형 (예 : 입력 유형 텍스트)에이를 적용하려면 다음을 수행하십시오.

<script>
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>

이것은 내 경우에 잘 작동합니다.

CSS로 가서 그것을 추가 한 다음 더 이상 입력을 원하지 않으면 삭제하거나 입력 activate하고 deactivate대신 입력 할 수있는 한 자동으로 공식 제출을 차단합니다

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

javascript:void(0)양식 제출을 막기 위해 사용할 수도 있습니다 .

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

이것은 다른 솔루션에 많은 좌절을 겪은 후 모든 브라우저에서 효과적이었습니다. name_space 외부 함수는 전역 선언과 거리를 두는 것입니다.

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

샘플 사용 :

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

사용하다:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>