트리거 입력 버튼 클릭

트리거 입력 버튼 클릭

두 개의 버튼이 있는 페이지가 있습니다.는 ★★★★★★★★★★★★★★★.<button>요소 및 다른 요소는<input type="submit">이치노, 를 누릅니다.<Enter>의 , 「」click이벤트가 트리거됩니다.버튼 요소가 먼저 위치하기 때문인 것 같습니다.

디폴트 버튼을 설정하는 신뢰할 수 있는 방법을 찾을 수 없습니다.또, 현시점에서는, 아무것도 찾을 수 없습니다.더 나은 게 없어서, 양식 어디든지 키 누르기를 캡처해 놨어요. ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★<Enter>★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

$('form').keypress( function( e ) {
  var code = e.keyCode || e.which;

  if( code === 13 ) {
    e.preventDefault();
    return false; 
  }
})

지금으로서는 효과가 있는 것 같지만, 믿을 수 없을 정도로 허술하게 느껴집니다.

이걸 하기 위한 더 정교한 기술을 아는 사람?

마찬가지로 이 솔루션에 대해 제가 모르고 있는 함정이 있습니까?

감사해요.

사용.

<button type="button">Whatever</button>

효과가 있을 거야

는 양식 안에 으로 「형식」으로 입니다.submit말한 바와 같이, 에는 최초의 zzzBoz가 되어 button ★★★★★★★★★★★★★★★★★」inputtype="submit"이 상황에서 트리거되는 것입니다.「 」를 설정했을 .type="button"브라우저에 의해 고려 대상에서 제외됩니다.

HTML 사양을 읽고 예상되는 동작을 올바르게 이해하는 것이 중요합니다.

HTML5 사양은 에서 일어나는 일을 명시적으로 기술하고 있습니다.

양식 요소의 기본 단추는 양식 소유자가 해당 양식 요소인 트리 순서대로 첫 번째 제출 단추입니다.

사용자 에이전트가 사용자가 암묵적으로 폼을 송신할 수 있도록 지원하는 경우(예를 들어 텍스트필드가 암묵적으로 포커스를 맞추고 있는 동안 일부 플랫폼에서 "Enter" 키를 눌러 폼을 송신하는 경우), 디폴트버튼에 액티베이션 동작이 정의되어 있는 폼에 대해 사용자 에이전트가 해당 디폴트에 대해 클릭 액티베이션 절차를 실행해야 합니다.톤수

이것은 HTML4 사양에 명시되어 있지 않지만 브라우저는 이미 HTML5 사양에 기술되어 있는 것을 실장하고 있습니다(그 때문에 명시적으로 포함되어 있습니다).

추가할 편집:

가 생각할 수 가장 은 첫 제출 입니다.[type="submit"]폼 내의 아이템을 css로 폼 하단에 패딩을 추가하고 제출 버튼을 원하는 하단에 배치합니다.

★★★를 <button>에서는, 그 버튼은 「이 버튼」으로 됩니다.type="submit" type="button" 그런 것은 되지 않습니다.<button>[제출] 제출하다

이 문제를 해결하기 위해 javascript나 CSS가 필요하지 않다고 생각합니다.

버튼용 html 5 사양에 따르면 타입 속성이 없는 버튼은 타입이 "submit"로 설정된 버튼과 동일하게 취급된다. 즉, 그 포함 폼을 제출하기 위한 버튼이다.버튼 유형을 "버튼"으로 설정하면 나타나는 동작을 방지할 수 있습니다.

브라우저 지원에 대해서는 잘 모르겠습니다만, 버튼의 html 4.01 사양에도 같은 동작이 기재되어 있기 때문에, 꽤 좋다고 생각합니다.

시 'Enter를 누릅니다<input type="text">에 있는인 '.<button> ★★★★★★★★★★★★★★★★★」<input type="submit">'에서 'Enter<textarea>이치노

이 예를 참조해 주세요.

에 새 줄을 수 .<textarea>에 키 은 키 누르기, 키 누르기, 키 누르기, 키 누르기, 키 누르기, 키 누르기, 키 누르기, 키 누르기, 키 누르기, 키 누르기, 키 누르기, 키 누르기, 키 누르기, 키 누르기, 키 누르기, 키 누르기, 키 누르기, 이런 거.<input type="text">.

왜 요?Enter스트트 필드 ?? ????키를 키를 .<button>: 이웃웃 the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the 。마크업만 가지고 놀면 됩니다.<input type="submit"> 코드<button>CSS를 사용하다

'Enter' 캡처 및 마크업 저장:

$('input[type="text"]').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code === 13) {
        e.preventDefault();
        // also submit by pressing Enter:
        $("form").submit();
    }
});

기본적으로 양식의 텍스트 필드에서 Enter 키를 누르면 양식이 제출됩니다.이렇게 동작하지 않으려면 Enter 키를 캡처하여 이전과 같이 소비해야 합니다.이 문제를 피할 방법이 없다.양식에 버튼이 없어도 이렇게 작동합니다.

javascript를 사용하여 적절한 시간까지 양식 제출을 차단할 수 있습니다.매우 조잡한 예:

<form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html">

    <input type='text' name='txtTest' />

    <input type='button' value='Submit' 
        onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' />

</form>

Enter 키를 눌러도 폼이 전송되지만, Javascript는 실제로 버튼을 누를 때까지 폼이 실제로 전송되지 않도록 합니다.

돔 예시

  <button onclick="anotherFoo()"> Add new row</button>
  <input type="text" name="xxx" onclick="foo(event)">

자바스크립트

function foo(event){
   if(event.which == 13 || event.keyCode == 13) // for crossbrowser
   {
     event.preventDefault(); // this code prevents other buttons triggers use this
     // do stuff
   }
}

function anotherFoo(){
  // stuffs.
}

prevent Default()를 사용하지 않으면 다른 버튼이 트리거됩니다.

저는 다음과 같이 하고 싶습니다.버튼의 온클릭 이벤트 핸들러에서 이벤트 객체의 키 코드를 확인합니다(전송하지 않음).만약 "입력"이라면 나는 거짓으로 반환할 것이다.

는 두 입니다.Submit요소 내의 : 튼 buttons을 、 buttons을릭클 。Update ★★★★★★★★★★★★★★★★★」Delete . 。Delete을 누르면 되고 ""가 삭제됩니다.Update버튼을 누르면 양식의 텍스트 필드로 데이터베이스가 업데이트됩니다.

왜냐하면Delete버튼은 폼의 첫 번째, 기본 버튼입니다.Enter열쇠는 내가 원한게 아니야유저는, 유저에 대해서, 다음과 같이 히트 할 수 있습니다.Enter일부 텍스트 필드를 변경한 후.

기본 버튼 설정에 대한 답변은 다음과 같습니다.

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>

스크립트를 사용하지 않고 각 버튼이 속한 폼을 정의했습니다.<button> form="bla"기여하다.설정했습니다.Delete합니다.Update에 .Enter사용자가 텍스트를 입력할 때 나타나는 폼의 키입니다.

지금까지 나에게 효과가 있었던 것은 이것뿐입니다.

이런 것도 할 수 있어요.

이벤트를 공통 함수로 바인드하고 키 누르기나 버튼 클릭으로 이벤트를 호출합니다.

예를들면.

function callME(event){
    alert('Hi');
}



$('button').on("click",callME); 
$('input ').keypress(function(event){
  if (event.which == 13) {
    callME(event);
  }
});

의 첫 번째 로 "submit) 버튼을 않게 .width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;사이트 갱신과 같이 동작합니다.버튼을 눌러도 사이트가 다시 로드되는 것 이외에는 아무것도 하지 않습니다.★★★★★★★★★★★★★★★★★★▼

언급URL : https://stackoverflow.com/questions/4763638/enter-triggers-button-click