Seam/JSF 양식 제출 실행 버튼 onclick 이벤트

Question

쿼리 빌더가 포함된 검색 양식이 있습니다.빌더는 버튼으로 활성화됩니다.이 같은

<h:form id="search_form">
  <h:outputLabel for="expression" value="Expression"/>
  <h:inputText id="expression" required="true" value="#{searcher.expression}"/>
  <button onclick="openBuilder(); return false;">Open Builder</button>
  <h:commandButton value="Search" action="#{searcher.search}"/>
</h:form>

결과는 두 가지 모두를 갖는 HTML입니다. <button/> 그리고 <input type="submit"/> 의 형태의.사용자가 표현식 필드에 문자열을 입력하고 제출 버튼을 클릭하지 않고 Enter 키를 누르면 검색이 제출되는 것이 예상되는 동작일 때 쿼리 빌더가 표시됩니다.무엇을 제공합니까?

Answer 1

HTML 양식의 버튼은 양식을 제출하는 데 사용되는 것으로 가정됩니다.버튼을 입력 유형="버튼"으로 변경하면 문제가 해결됩니다.

또는 버튼 요소에 type="button"을 추가하세요.

Answer 2

먼저 검색 버튼에 ID를 부여합니다.그런 다음 텍스트 상자에서 클라이언트 이벤트를 가로챌 수 있습니다. 온키다운, 다음과 같은 (자바스크립트) 함수를 사용합니다.

  function KeyDownHandler(event)
    {
        // process only the Enter key
        if (event.keyCode == 13)
        {
            // cancel the default submit
            event.returnValue=false;
            event.cancel = true;
            // submit the form by programmatically clicking the specified button
            document.getElementById('searchButtonId').click();
        }
    }

내가 당신을 도와주기를 바랍니다.

Answer 3

단일 입력 필드가 있는 경우 양식 내에서 Enter 키를 누르면 많은 브라우저가 자동으로 양식을 제출합니다.

노력하다

1. 다른 입력 필드를 추가하세요.보이지 않도록 스타일을 지정하여 숨깁니다.(예: <input type="text" name="bogusField" style="display: none;" />
2. JavaScript 이벤트 핸들러 내에서 키 입력 양식 제출 동작을 차단합니다(예: 여기 또는 여기).더 나은 방법은 이 작업에 도움이 될 수 있는 GUI 툴킷(예: GWT)을 사용하는 것입니다.