트리거 입력 버튼 클릭

두 개의 버튼이있는 페이지가 있습니다. 하나는 <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입니다. zzzzBoz 말하는 것처럼, 사양은 첫째 말한다 button또는 input으로는 type="submit"이 상황에서 트리거 될 것입니다. 특별히을 설정 type="button"하면 브라우저에서 고려하지 않습니다.

예상되는 동작을 실제로 이해하려면 HTML 사양을 읽어야합니다.

HTML5 스펙이 명시 적으로 일어나는 상태implicit submissions :

양식 요소의 기본 버튼은 양식 소유자가 해당 양식 요소 인 트리 순서의 첫 번째 제출 버튼입니다.

사용자 에이전트가 사용자가 양식을 암시 적으로 제출할 수 있도록 지원하는 경우 (예를 들어, 텍스트 필드에 포커스가있는 동안 "enter"키를 치는 일부 플랫폼에서 양식은 암시 적으로 양식을 제출 함) 기본 단추가 정의 된 활성화 된 양식에 대해 수행 이 동작으로 인해 사용자 에이전트는 해당 기본 버튼에서 합성 클릭 활성화 단계를 실행해야합니다.

이것은 HTML4 사양에서 명시 적으로 만들어지지 않았지만 브라우저는 이미 HTML5 사양에 설명 된 내용을 구현하고 있습니다 (이것이 명시 적으로 포함 된 이유입니다).

추가하려면 다음을 편집하십시오.

내가 생각할 수있는 가장 간단한 대답은 제출 버튼을 [type="submit"]양식 의 첫 번째 항목 으로 넣고 CSS로 양식 맨 아래에 패딩을 추가하고 제출 버튼을 원하는 맨 아래에 배치하는 것입니다.

이 문제를 해결하기 위해 자바 스크립트 또는 CSS가 필요하다고 생각하지 않습니다.

버튼 에 대한 HTML 5 스펙에 따르면, 타입 속성이없는 버튼은 타입이 "submit"으로 설정된 버튼, 즉 포함 양식을 제출하기위한 버튼과 동일하게 취급됩니다. 버튼 유형을 "버튼"으로 설정하면 현재 보이는 동작을 막을 수 있습니다.

브라우저 지원에 대해서는 확실하지 않지만 버튼 에 대한 html 4.01 스펙에 동일한 동작이 지정 되었으므로 꽤 좋습니다.

초점을 맞추고 'Enter'를 누르면 <input type="text">첫 번째 위치 요소에서 'click'이벤트가 트리거됩니다 : <button>또는 <input type="submit">. 에서 'Enter'를 누르면 <textarea>새 텍스트 줄만 만듭니다.

여기 예를 참조 하십시오 .

코드에서에 새로운 텍스트 줄을 만들지 못 <textarea>하므로 키만 눌러야합니다.<input type="text"> .

그러나 왜 Enter텍스트 필드 를 눌러야 합니까? 'Enter'를 눌러 양식을 제출하고 싶지만 <button>레이아웃에서 첫 번째를 유지 해야하는 경우 마크 업으로 재생 <input type="submit">하십시오.<button> 사용 CSS를 사용하여 필요한 레이아웃을 저장하십시오.

'Enter'잡기 및 마크 업 저장 :

$('input[type="text"]').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code === 13)
    e.preventDefault();
    $("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/
});

<button>기본적으로 요소 를 사용하는 곳 은 해당 버튼을 고려하므로 버튼 type="submit"을 정의하면 제출 버튼으로 type="button"간주하지 않습니다 <button>.

양식의 텍스트 필드에서 Enter를 누르면 기본적으로 양식이 제출됩니다. 그런 식으로 작동하지 않으려면 enter 키를 눌러 캡처 한 것처럼 소비해야합니다. 이 문제를 해결할 방법이 없습니다. 양식에 버튼이 없어도이 방법으로 작동합니다.

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

<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.
}

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

버튼과 같은 onclick 이벤트 핸들러 (제출 안 됨)에서 이벤트 객체의 키 코드를 확인하십시오. "enter"이면 false를 반환합니다.

내 상황은 두 가지가 Submit폼 요소 내에서 버튼 : 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;). 사이트를 새로 고치는 것처럼 작동합니다. 즉, 사이트를 다시로드하는 것 외에는 버튼을 누를 때 아무 작업도 수행하지 않습니다. 나를 위해 잘 작동합니다 ...