[javascript] 리턴 키를 눌렀을 때 양식을 제출하는 방법은 무엇입니까?

Question 1

누군가가 리턴 키를 눌렀을 때 그리고 양식에 버튼이없는 경우 HTML 양식을 제출하는 방법을 알려주시겠습니까?
제출 버튼이 없습니다 . 대신 사용자 지정 div를 사용하고 있습니다.

Question 2

IMO, 이것이 가장 깨끗한 대답입니다.

<form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input type="submit" style="display:none"/>
</form>

스 니펫 확장

더 좋은 점은 javascript를 사용하여 사용자 지정 div를 사용하여 양식을 제출하는 경우 javascript를 사용하여 만들고 단추에 display : none 스타일을 설정해야합니다. 이렇게하면 자바 스크립트가 비활성화 된 사용자에게 제출 버튼이 계속 표시되고 클릭 할 수 있습니다.

display : none은 IE가 입력을 무시하도록합니다. 표준 양식으로 시작하고 점진적 향상을 사용하여 제출을 숨기고 새 div를 만드는 새로운 JSFiddle 예제 를 만들었습니다 . StriplingWarrior 의 CSS 스타일을 사용했습니다 .

Question 3

Enter 키를 눌렀을 때 양식을 제출하려면이 행을 따라 자바 스크립트 함수를 만듭니다.

function checkSubmit(e) {
   if(e && e.keyCode == 13) {
      document.forms[0].submit();
   }
}

그런 다음 필요한 범위 (예 : div 태그)에 이벤트를 추가합니다.

<div onKeyPress="return checkSubmit(event)"/>

이것은 Internet Explorer 7의 기본 동작이기도합니다 (아마도 이전 버전 일 수도 있음).

Question 4

다양한 javascript / jQuery 기반 전략을 시도했지만 문제가 계속 발생했습니다. 최근 발생한 문제는 사용자가 브라우저의 내장 자동 완성 목록에서 선택하기 위해 Enter 키를 사용할 때 실수로 제출하는 것과 관련이 있습니다. 마침내 회사가 지원하는 모든 브라우저에서 작동하는이 전략으로 전환했습니다.

<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>

.hidden-submit {
    border: 0 none;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

이것은 Chris Marasti-Georg가 현재 받아 들인 답변과 유사하지만를 피 display: none하면 모든 브라우저에서 올바르게 작동하는 것으로 보입니다.

최신 정보

위의 코드를 음수를 포함하도록 편집하여 tabindex탭 키를 캡처하지 않습니다. 기술적으로는 HTML 4에서 유효성을 검사하지 않지만 HTML5 사양에는 대부분의 브라우저에서 이미 구현 한 방식대로 작동하도록하는 언어가 포함되어 있습니다.

Question 5

<button>태그를 사용하십시오 . W3C 표준에서 :

BUTTON 요소로 만든 버튼은 INPUT 요소로 만든 버튼처럼 기능하지만 더 풍부한 렌더링 가능성을 제공합니다. BUTTON 요소에 콘텐츠가있을 수 있습니다. 예를 들어, 이미지를 포함하는 BUTTON 요소는 유형이 “이미지”로 설정된 INPUT 요소와 비슷하게 작동하지만 BUTTON 요소 유형은 콘텐츠를 허용합니다.

기본적으로 양식을 제출할 수있는 javascript<button> 가 필요없는 다른 태그가 있습니다. 버튼 태그 내부를 <div>포함 하여 태그 방식으로 스타일을 지정할 수 있습니다 <img />. <input />태그 의 버튼은 거의 유연하지 않습니다.

<button type="submit">
    <img src="my-icon.png" />
    Clicking will submit the form
</button>

에 설정할 세 가지 유형이 있습니다 <button>. <input>버튼 유형에 매핑됩니다 .

<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>

기준

나는 <button>태그를CSS 스프라이트 그리고 약간 CSS화려하고 기능적인 폼 버튼을 얻기위한 스타일링. 예를 들어, 요소 <a class="button">와 스타일링에 대한 링크 공유에 대한 CSS를 작성할 수 있습니다 <button>.

Question 6

나는 이것이 당신이 원하는 것이라고 믿습니다.

//<![CDATA[

//Send form if they hit enter.
document.onkeypress = enter;
function enter(e) {
  if (e.which == 13) { sendform(); }
}

//Form to send
function sendform() {
  document.forms[0].submit();
}
//]]>

키를 누를 때마다 enter () 함수가 호출됩니다. 누른 키가 Enter 키 (13)와 일치하면 sendform ()이 호출되고 처음 발견 된 양식이 전송됩니다. 이것은 Firefox 및 기타 표준 호환 브라우저에만 해당됩니다.

이 코드가 유용하다고 생각되면 반드시 투표 해주세요!

Question 7

다음은 jQuery로 수행하는 방법입니다.

j(".textBoxClass").keypress(function(e)
{
    // if the key pressed is the enter key
    if (e.which == 13)
    {
        // do work
    }
});

다른 자바 스크립트는 너무 다르지 않습니다. catch는 Enter 키인 “13”의 키 누르기 인수를 확인합니다.

Question 8

다음 스크립트를 사용하십시오.

<SCRIPT TYPE="text/javascript">
<!--
    function submitenter(myfield,e)
    {
        var keycode;
        if (window.event) keycode = window.event.keyCode;
        else if (e) keycode = e.which;
        else return true;

        if (keycode == 13)
        {
            myfield.form.submit();
            return false;
        }
        else
            return true;
    }
//-->
</SCRIPT>

사용자가 Enter를 누를 때 양식을 제출해야하는 각 필드에 대해 다음과 같이 submitenter 함수를 호출하십시오.

<FORM ACTION="../cgi-bin/formaction.pl">
    name:     <INPUT NAME=realname SIZE=15><BR>
    password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
       onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>