2012-06-04 2 views
1

검색 텍스트 필드가 두 세트 있습니다.두 번째 텍스트 필드에 초점

반환 키 (Enter)를 사용하여 제출을 시도하면 첫 번째 텍스트 필드가 올바르게 작동합니다. 그러나 두 번째 텍스트 필드를 입력하고 리턴 키를 누르면 첫 번째 텍스트 필드가 실행됩니다.

secondTextField = new TextField("secondTextField", new Model()){ 
     @Override 
     protected void onComponentTag(ComponentTag tag) 
     { 
       super.onComponentTag(tag); 

       tag.put("onclick", "getelementbyid('"+secondTextField.getMarkupId()+"').focus()"); 

     } 
    }; 

    form.add(secondTextField); 

을하지만이 작동하지 않습니다 : 다음으로

나는 두 번째 텍스트 필드에 포커스를 설정하기 위해 노력했다. 어떤 아이디어?

+1

달성하려는 목표에 대해 좀 더 명확하게 나타낼 수 있습니까? 첫 번째 텍스트 필드는 어떻게 생겼습니까? 양식 제출에 비헤이비어를 추가하려고합니까 (그렇다면이 비헤이비어를 원하는 곳이기 때문에). 지금은 두 번째 텍스트 필드를 설정하여 클릭 할 때 포커스를 얻는 것처럼 보입니다. – ig0774

+0

@ ig0774 그들은 기본적으로 거기에 자신의 제출 버튼과 함께 두 개의 검색 상자입니다. 내가 성취하고자 노력한 것은 두 번째 검색 텍스트 상자에 텍스트를 입력하고 입력 버튼을 사용하여 제출 버튼을 클릭하는 대신 검색을 수행하는 것입니다. 현재 Enter 키를 누를 때마다 첫 번째 검색 텍스트 상자의 제출 버튼이 작동합니다. – Best

답변

2

달리 정의되지 않은 한, 거의 모든 브라우저는 enter 키의 첫 번째 사용 가능한 버튼으로 현재 양식을 제출합니다. 따라서 다른 버튼을 사용하려면 Enter 키를 캡처하기 위해 JavaScript로 TextField를 꾸며야하고, 적절한 Button을 사용하여 양식을 제출하고 (중요합니다) false를 반환해야합니다.

두 TextField를 별도의 폼 (가능한 경우)으로 분리하면이 문제를 해결할 수 있지만 그럴 수는 없으므로 추측 할 수 있습니다.

다음 코드를 TextField에 추가하면 Enter 키가 양식 전송을 트리거하지 않습니다. 특정 버튼을 눌러 제출하려면이를 수정해야합니다.

/** 
* Behavior that traps the enter key press 
* 
* @author ivaynberg 
*/ 
public class EnterKeyTrap extends Behavior implements IHeaderContributor { 

    private static final long serialVersionUID = -410239548482332706L; 

    @Override 
    public void onComponentTag(Component component, ComponentTag tag) { 
     tag.put("onkeydown", "return ekt(event)!=13"); 
    } 

    public void renderHead(IHeaderResponse response) { 
     response.renderJavaScript("function ekt(e){if(typeof(e.keyCode)==\"undefined\"){return e.which;}else{return e.keyCode;}}", "EnterKeyTrap"); 
    } 

} 
관련 문제