버튼을 활성화하는 대신 HTML 양식 제출에 Enter 키 만들기

단일 submit입력 이있는 HTML 양식이 있지만 다양한 button요소도 있습니다. 사용자가 '엔터'키를 누르면 실제로 양식을 제출할 것으로 예상하지만 대신 (적어도 Chrome 15 내에서) 첫 번째를 트리거하고 있습니다 button( submit입력 보다 HTML에서 더 일찍 발생하기 때문에 , 나는 추측한다).

일반적으로 브라우저가 특정 submit입력 을 선호하도록 강요 할 수는 없지만 요소 submit보다 입력을 선호 할 것이라고 생각했습니다 button. 이 작업을 수행하기 위해 HTML을 약간 조정할 수 있습니까? 아니면 Javascript 접근 방식을 수용해야합니까?

다음은 HTML의 대략적인 모형입니다.

<form action="form.php" method="POST">
    <input type="text" name="field1"/>
    <button onclick="return myFunc1()">Button 1</button>
    <input type="submit" name="go" value="Submit"/>
</form>

기본 제출 버튼 또는 입력을 선택하는 데 JavaScript가 필요하지 않습니다. 으로 표시하면되고 type="submit"다른 버튼은로 표시됩니다 type="button". 귀하의 예에서 :

<button type="button" onclick="return myFunc1()">Button 1</button>
<input type="submit" name="go" value="Submit"/>

jQuery를 사용할 수 있습니다.

$(function() {
    $("form input").keypress(function (e) {
        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
            $('button[type=submit] .default').click();
            return false;
        } else {
            return true;
        }
    });
});

예를 들어 Enter 키를 누르면 다음과 같이 캡처 할 수 있습니다. 다른 날에 html 버튼 이 선택됨을 지정 하여 답변을 개발했습니다 . 이것이 도움이되는지 확인하십시오.

예를 들어 양식 이름을 지정하면 양식에 yourFormName초점을 맞추지 않고도 양식을 제출할 수 있습니다.

document.onkeypress = keyPress;

function keyPress(e){
  var x = e || window.event;
  var key = (x.keyCode || x.which);
  if(key == 13 || key == 3){
   //  myFunc1();
   document.yourFormName.submit();
  }
}

방금 문제가 발생했습니다. 광산은은을 변경 떨어져 있었다 inputA와 button나는 심하게 쓴 것 />태그 터미네이터 :

그래서 나는 :

<button name="submit_login" type="submit" class="login" />Login</button>

그리고 다음과 같이 수정했습니다.

<button name="submit_login" type="submit" class="login">Login</button>

이제 매력처럼 작동합니다. 항상 성가신 작은 것들 ... HTH

$("form#submit input").on('keypress',function(event) {
  event.preventDefault();
  if (event.which === 13) {
    $('button.submit').trigger('click');
  }
});

제출 버튼이 하나만있는 경우 (또는이 솔루션이 잠재적으로 하나도 아님) 제출 버튼이있는 경우 동일한 페이지의 여러 양식에 대해 작동하는 jQuery 기반 솔루션이 있습니다.

<script type="text/javascript">
    $(document).ready(function () {

        var makeAllFormSubmitOnEnter = function () {
            $('form input, form select').live('keypress', function (e) {
                if (e.which && e.which == 13) {
                    $(this).parents('form').submit();
                    return false;
                } else {
                    return true;
                }
            });
        };

        makeAllFormSubmitOnEnter();
    });
</script>

방금 Chrome과 Firefox 및 IE10에서 소용돌이를주었습니다.

위에서 언급했듯이-type = "button", "reset", "submit"등으로 마크 업하여 올바르게 계단식으로 표시되고 올바른 버튼을 선택하는지 확인하십시오.

아마도 그들 모두가 동일한 형태를 갖도록 설정했을 수도 있습니다.