트리거 입력 버튼 클릭

트리거 입력 버튼 클릭

---

두 개의 버튼이있는 페이지가 있습니다. 하나는 <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>.

---

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

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

Pressing enter will still trigger the form to submit, but the javascript will keep it from actually submitting, until you actually press the button.

---

Pressing enter in a form's text field will, by default, submit the form. If you don't want it to work that way you have to capture the enter key press and consume it like you've done. There is no way around this. It will work this way even if there is no button present in the form.

---

Dom example

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

javascript

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

if you don't use preventDefault(), other buttons will triggered.

---

I would do it like the following: In the handler for the onclick event of the button (not submit) check the event object's keycode. If it is "enter" I would return false.

---

My situation has two Submit buttons within the form element: Update and Delete. The Delete button deletes an image and the Update button updates the database with the text fields in the form.

Because the Delete button was first in the form, it was the default button on Enter key. Not what I wanted. The user would expect to be able to hit Enter after changing some text fields.

I found my answer to setting the default button here:

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

Without using any script, I defined the form that each button belongs to using the <button> form="bla" attribute. I set the Delete button to a form that doesn't exist and set the Update button I wanted to trigger on the Enter key to the form that the user would be in when entering text.

This is the only thing that has worked for me so far.

---

I added a button of type "submit" as first element of the form and made it invisible (width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;). Works like a refresh of the site, i.e. I don't do anything when the button is pressed except that the site is loaded again. For me works fine...

참고URL : https://stackoverflow.com/questions/4763638/enter-triggers-button-click