양식에서 Enter 키를 누를 때 실행할 기본 동작

양식에서 Enter 키를 누를 때 실행할 기본 동작

---

두 개의 버튼과 여러 개의 입력 필드가있는 jsf 1.2 양식이 있습니다. 첫 번째 버튼은 입력 된 값을 버리고 db의 값으로 페이지를 다시 채우고 두 번째 버튼은 입력 된 값을 저장합니다. 이 문제는 커서가 입력 필드 중 하나에있는 동안 사용자가 Enter 키를 누르면 양식이 제출되고 첫 번째 버튼과 관련된 작업이 실행될 때 발생합니다.

코드는 다음과 같습니다.

<h:commandButton action="#{bean.reset}" value="Reset" />
<h:commandButton action="#{bean.save}" value="Save" />

<!-- h:datatable with several h:inputText elements -->

Enter 키를 누를 때 특정 버튼을 기본 동작으로 선언 할 수 있습니까? 이 동작이 실제로 어딘가에 지정되어 있습니까?

---

이것은 JSF에만 국한되지 않습니다. 이것은 HTML에만 해당됩니다. HTML5 양식 사양 섹션 4.10.22.2 첫 번째로 발생 된 것을 기본적으로 지정 <input type="submit">같은에서 "트리 순서"의 요소 <form>되는 HTML DOM 트리에서 현재의 입력 요소로 프레스를 입력에 호출됩니다.

기본적으로 두 가지 해결 방법이 있습니다.

• JavaScript를 사용하여 Enter 키 누름을 캡처하고 원하는 버튼을 호출합니다.

  <h:form onkeypress="if (event.keyCode == 13) { document.getElementById('formid:saveid').click(); return false; }">
  

  양식에 텍스트 영역이있는 경우 양식 대신 텍스트 영역이 아닌 모든 입력 요소에 JS를 배치하고 싶습니다. Enter 키를 눌러 사용자가 양식을 제출하지 못하도록 방지를 참조 하십시오 .

  ---

• HTML에서 버튼을 교체하고 CSS 부동을 사용하여 다시 교체하세요.

  <div style="width: 100px; clear: both;">
      <h:commandButton action="#{bean.save}" value="Save" style="float: right;" />
      <h:commandButton action="#{bean.reset}" value="Reset" style="float: left;" />
  </div>
  

  픽셀 미세 조정 만 필요할 수 있습니다. 물론 CSS를 자체 .css파일 에 넣습니다 . 사용하는 style것은 좋은 방법입니다, 위의 예는 간결을위한 것입니다.

  ---

PrimeFaces를 사용하는 경우 3.2부터는 <p:defaultCommand>양식 내에서 Enter 키를 누를 때 호출해야하는 버튼을 선언적으로 식별하는 데 사용할 수 있습니다 .

<h:form>
    <p:defaultCommand target="save" />
    ...
    <h:commandButton id="reset" action="#{bean.reset}" value="Reset" />
    <h:commandButton id="save" action="#{bean.save}" value="Save" />
</h:form>

keydown리스너를 부모에 연결하는 자바 스크립트를 사용하여 커버 아래에 있으며, <h:form>이는 비 텍스트 영역 / 버튼 / 링크 요소에서 Enter 키가 눌 렸는지 확인한 다음 click()대상 요소에서 호출합니다 . 이 답변에서 1st 언급 된 해결 방법과 기본적으로 동일합니다.

---

덜 해키하고 잘 작동하는 방법을 찾았습니다. 아이디어는 숨겨져 commandButton있습니다.

안타깝게도 display:none스타일은 commandButton무시 되므로 사용할 수 없습니다 . visibility:hidden구성 요소의 공간을 예약하기 때문에 좋지 않습니다.

그러나 다음 CSS를 사용하여 시각적 모양 의 크기 가 0이 되도록 스타일을 미세 조정할 수 있습니다 .

.zeroSize {
    visibility: hidden;
    padding: 0px;
    margin: 0px;
    border: 0px;
    width: 0px;
    height: 0px;
}

이제 필요한 것은 다음과 같습니다.

<h:commandButton value="" action="#{bean.save}" class="zeroSize" />

그러면 first-next-submit-button 규칙에 따라 활성화 될 수있는 보이지 않는 명령 단추가 생성됩니다.

---

요소를 숨기려면 css를 사용할 수 있습니다. style="visibility: hidden"

프라임 페이스를 사용하는 경우 기본 동작을 변경하려면 다음을 사용할 수 있습니다. <p:defaultCommand target="yourButtonDefault" />예 :

<h:form id="form">

    <h:panelGrid columns="3" cellpadding="5">
        <h:outputLabel for="name" value="Name:" style="font-weight:bold"/>
        <p:inputText id="name" value="#{defaultCommandBean.text}" />
        <h:outputText value="#{defaultCommandBean.text}" id="display" />
    </h:panelGrid>

    <p:commandButton value="Button1" id="btn1" actionListener="#{defaultCommandBean.btn1Submit}" ajax="false"/>
    <p:commandButton value="Button2" id="btn2" actionListener="#{defaultCommandBean.btn2Submit}" />
    <h:commandButton value="Button3" id="btn3" actionListener="#{defaultCommandBean.btn3Submit}" />

    <p:defaultCommand target="btn3" />

</h:form>

출처 : Primefaces 새 구성 요소 : DefaultCommand

---

JavaScript를 사용하여 문제를 해결하라는 BalusC의 권장 사항에 따라 작업을 수행하는 몇 가지 jQuery 코드를 작성했습니다.

$(function(){
  $('form').on('keypress', function(event){
    if(event.which === 13 && $(event.target).is(':input')){
        event.preventDefault();
        $('#save').trigger('click');
    }
  });
});

CodePen : http://codepen.io/timbuethe/pen/AoKJj

---

Ignore the ENTER key only in text input fields (source):

<script type="text/javascript"> 

  function stopRKey(evt) { 
     var evt = (evt) ? evt : ((event) ? event : null); 
     var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
     if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
  } 

  document.onkeypress = stopRKey; 

</script>

---

You can use a h:commandLink for the first button and style it with css like the h:commandButton.

For Example bootstraps "btn btn-default" look the same on commandLink and commandButton.

ReferenceURL : https://stackoverflow.com/questions/5485851/default-action-to-execute-when-pressing-enter-in-a-form