[javascript] HTML 양식의 기본 제출 버튼은 어떻게 결정됩니까?

Andrezj는 거의 문제가 없었지만 여기에 쉬운 크로스 브라우저 솔루션이 있습니다.

다음과 같은 양식을 작성하십시오.

<form>
    <input/>
    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>

    <button type="submit" value="default action"/>
</form>

그리고 이것을 리팩토링하십시오 :

<form>
    <input/>

    <button style="overflow: visible !important; height: 0 !important; width: 0 !important; margin: 0 !important; border: 0 !important; padding: 0 !important; display: block !important;" type="submit" value="default action"/>

    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>
    <button type="submit" value="still another non-default action"/>

    <button type="submit" value="default action"/>
</form>

W3C 사양에는 여러 제출 단추가 유효하지만 사용자 에이전트가 처리해야하는 방법에 대한 지침은 생략되어 있으므로 브라우저 제조업체는 적절한대로 구현해야합니다. 양식에 첫 번째 제출 버튼을 제출하거나 현재 포커스가있는 양식 필드 다음에 다음 제출 버튼을 제출하는 것으로 나타났습니다.

불행히도 단순히 표시 스타일을 추가하는 것 : none; W3C 사양은 숨겨진 요소가 사용자 상호 작용에서 제외되어야 함을 나타내므로 작동하지 않습니다. 그래서 대신에 그것을 평범한 곳에 숨기십시오!

위는 제가 생산에 투입 한 솔루션의 예입니다. Enter 키를 누르면 기본값 이외의 다른 값이 존재하고 DOM의 기본 제출 단추 앞에있는 경우에도 기본 양식 제출이 예상대로 작동합니다. 자바 스크립트 핸들러를 피하면서 명시적인 사용자 입력과 마우스 / 키보드 상호 작용에 대한 보너스.

참고 : 양식을 탭하면 시각적 요소에 대한 초점이 표시되지 않지만 여전히 보이지 않는 버튼이 선택됩니다. 이 문제를 피하려면 간단히 tabindex 속성을 설정하고 보이지 않는 제출 단추에서 tabindex 속성을 생략하십시오. 이러한 스타일을 중요로 승격시키는 것이 적절하지 않은 것처럼 보일 수 있지만 프레임 워크 또는 기존 버튼 스타일이이 수정을 방해하지 않아야합니다 . 또한 인라인 스타일은 형식이 좋지 않지만 프로덕션 코드를 작성하지 않고 개념을 입증하고 있습니다.

답변

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

jQuery(document).ready(function() {
$("form input, form select").live('keypress', function (e) {
if ($(this).parents('form').find('button[type=submit].default, input[type=submit].default').length <= 0)
return true;

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

<SCRIPT Language="JavaScript">
function validform()
{
  // do whatever you need to validate the form, and return true or false accordingly
}

function mjsubmit()
{
  if (validform()) { document.form1.submit(); return true;}
  return false;
}
</SCRIPT>
<INPUT TYPE=BUTTON NAME="button1" VALUE="button1" onClick="document.form1.submitvalue='button1'; return mjsubmit();">
<INPUT TYPE=BUTTON NAME="button2" VALUE="button2" onClick="document.form1.submitvalue='button2'; return mjsubmit();">
<INPUT TYPE=SUBMIT NAME="button3" VALUE="button3" onClick="document.form1.submitvalue='button3'; return validform();">
<INPUT TYPE=BUTTON NAME="button4" VALUE="button4" onClick="document.form1.submitvalue='button4'; return mjsubmit();">

<form>
    <h1>My Form</h1>
    <label for="text">Input:</label>
    <input type="text" name="text" id="text"/>

    <!-- Put the elements in reverse order -->
    <div class="form-actions">
        <button>Ok</button> <!-- our default action is first -->
        <button>Cancel</button>
    </div>
</form>

.form-actions {
    display: flex;
    flex-direction: row-reverse; /* reverse the elements inside */
}

<button type="submit" onclick="this.form.action = '#another_page'">More</button>

<div style="width: 0; height: 0; overflow: hidden;">
    <button type="submit" class="btn btn-default" onclick="alert('Hidden submit button #3 was clicked');">Hidden submit button #3</button>
</div>