활성화 버튼 대신 HTML 양식의 Enter 키를 제출하도록 만들기

활성화 버튼 대신 HTML 양식의 Enter 키를 제출하도록 만들기

저는 HTML 양식을 가지고 있습니다.submit입력뿐만 아니라 다양한button요소들.사용자가 '엔터' 키를 누르면 실제로 양식이 제출될 것으로 예상되지만, 대신 (적어도 크롬 15 내에서는) 첫 번째 키가 트리거되고 있음을 알 수 있습니다.button(HTML보다 HTML에서 먼저 발생하기 때문에)submit인풋(input).

일반적으로 브라우저가 특정한 것을 선호하도록 강요할 수 없다는 것을 알고 있습니다.submit하지만 난 정말 그들이 그들을 선호할 것이라고 생각했습니다.submit에 대한 입력.button요소들.이 작업을 수행하기 위해 HTML을 약간 수정할 수 있습니까? 아니면 일종의 자바스크립트 접근 방식을 수용해야 합니까?

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>

기본 제출 버튼이나 입력을 선택하기 위해 자바스크립트가 필요하지 않습니다.당신은 그것을 단지 당신과 함께 표시하기만 하면 됩니다.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;
        }
    });
});

이것을 시도해 보세요, 엔터키를 눌렀다면 이렇게 캡처할 수 있습니다. 예를 들어, 저는 일전에 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();
  }
}

저는 이것에 문제가 생겼습니다.내 것은 그것을 바꾸는 것에서 떨어진 것입니다.input에 이르기까지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 모두에서 이것을 시도했습니다.

위에서 언급한 바와 같이 = "버튼", "reset", "submit" 등의 유형으로 표시하여 올바른 버튼을 선택했는지 확인합니다.

아마도 또한 그들 모두가 같은 양식을 갖도록 설정할 수도 있습니다(즉, 나에게 효과가 있었던 모든 것).

언급URL : https://stackoverflow.com/questions/8294465/making-enter-key-on-an-html-form-submit-instead-of-activating-button