jquery - 처리 - 엔터 키 코드

1. 입력 또는 버튼에 type = "submit" 을 사용하지 마십시오.
2. type = "button" 을 사용하고 js [Jquery / angular / etc]를 사용하여 서버에 양식을 제출하십시오.

나는 모든 답변으로 잘 덮여 있다고 생각하지만, 일부 자바 스크립트 유효성 검사 코드가있는 버튼을 사용하는 경우 Enter 키에 대한 양식의 onkeypress를 설정하여 제출 내용을 예상대로 호출 할 수 있습니다.

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

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

나는 아직 논평 할 수 없다. 그래서 나는 새로운 대답을 게시 할 것이다.

수락 가능한 대답은 ok-ish이지만 numpad enter에서 제출을 중단하지 않았습니다. 적어도 현재 버전의 Chrome. 나는 이것에 키 코드 조건을 변경해야만했다.

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

멋진 간단한 jQuery 솔루션 :

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

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

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

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

<form onsubmit="return false;">

자바 스크립트에서 submit ()을 호출하면 이벤트가 트리거되지 않습니다.

약간 CoffeeScript 코드를 추가하고 싶습니다 (필드 테스트하지 않음).

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

(네가 unless 절의 멋진 트릭을 좋아하길 바란다.)

여기서 보지 못한 뭔가가 있습니다. 페이지의 요소를 탭 이동할 때 제출 단추에 도달 할 때 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/ . https://jsfiddle.net/nemesarial/6rhogva2/

완전히 다른 접근법 :

1. 양식의 첫 번째 <button type="submit"> 은 Enter 키 를 누르면 활성화됩니다.
2. 버튼이 style="display:none; 숨겨져 있어도 마찬가지입니다 style="display:none;
3. 해당 버튼에 대한 스크립트는 제출 프로세스를 중단하는 false 를 반환 할 수 있습니다.
4. 양식을 제출하기 위해 다른 <button type=submit> 을 가질 수 있습니다. 제출 양식을 계단식으로 작성하기 만하면됩니다.
5. 실제 제출 버튼이 집중되어있는 동안 Enter 를 누르면 실제 제출 버튼이 활성화됩니다.
6. <textarea> 또는 다른 폼 컨트롤에서 Enter 키를 누르면 정상적으로 동작합니다.
7. <input> 폼 컨트롤 내에서 Enter 키를 누르면 첫 번째 <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>

용도:

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

유일한 차단 제출하지만 <textarea> 에 새 단락 만들기와 같이 Enter 키의 중요한 기능은 없습니다.

window.addEventListener('keydown', function(e){
    //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) {
            e.preventDefault();
            return false;
        }
    })
}

이것은 다른 솔루션에 많은 좌절감을 안겨준 후 모든 브라우저에서 저에게 효과적이었습니다. 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!');}
    );
});

이미 많은 좋은 해답이 있습니다. 단지 UX 관점에서 뭔가를 기여하고 싶습니다. 양식의 키보드 컨트롤은 매우 중요합니다.

질문은 Enter 키를 눌러 제출을 비활성화하는 방법입니다. 무시할 방법이 아닌 전체 응용 프로그램에서 Enter . 따라서 핸들러를 창이 아닌 양식 요소에 연결하는 것이 좋습니다.

양식 제출에 Enter 를 사용 중지해도 다음 사항이 허용됩니다.

1. 제출 버튼에 중점을두면 Enter 를 통해 양식을 제출 Enter .
2. 모든 필드가 채워지면 양식을 제출하십시오.
3. Enter 를 통해 제출하지 않은 버튼과의 상호 작용.

이것은 단지 상용구이지만 3 가지 조건 모두를 따릅니다.

$('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;
  }
});

특정 입력 만 제출하지 못하도록해야하므로 클래스 선택기를 사용하여 필요시 언제든지이를 "전역"기능으로 사용할 수있었습니다.

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

그리고이 jQuery 코드 :

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

또는 keydown이 충분하지 않은 경우 :

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

몇 가지 메모 :

여기서 여러 가지 좋은 답변을 수정하면 Enter 키가 모든 브라우저에서 keydown 에 대해 작동하는 것 같습니다. 대안으로 bind() 를 on() 메소드로 업데이트했다.

저는 모든 선생님과 단점과 성능 토론의 무게를 달아주는 수업 선택자의 큰 팬입니다. 내 이름 지정 규칙은 'idSomething'이며 jQuery가이를 CSS 스타일링과 구분하기 위해 ID로 사용함을 나타냅니다.

폼에 '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>

필자의 경우에는 입력을 중단하고 제출 버튼을 클릭 시뮬레이션해야했습니다. 이것은 우리가 모달 윈도우 (이전 코드 상속)에 있었기 때문에 제출 버튼에 클릭 핸들러가 있었기 때문입니다. 어쨌든 여기에 내 콤보 솔루션이 있습니다.

    $('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을 사용하는 사람들에게 유용합니다.

섹션 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가 사용되는지 여부에 관계없이 암시 적 양식 제출을 방지하려면 표준 준수 웹 브라우저가 필요합니다.