Automatically change focus to next input field after reaching maximum characters

Question

Here is my xHTML code:

<div id="list">
                    <p:outputLabel styleClass="heading" value="#{msg['content.search.title']}" />


                    <p:outputLabel value="#{msg['content.search.bic']}" />

                    <p:inputText styleClass="prefix" value="#{Controller.prefix}" maxlength="4" onkeyup="return this.value.length >= 4">

                    <p:ajax event="keyup" listener="#{Controller.check}"></p:ajax>
                        </p:inputText>

                    <p:inputText id="countryCode" widgetVar="countryCode" styleClass="countryCode" value="#{Controller.CountryCode}" maxlength="2">                 

<\div>

My java backing bean function looks like this:

public String check()
    {
        RequestContext.getCurrentInstance().execute("list:countryCode.focus();");
        return "";
    }

What I want is that when I enter 4 characters in prefix the focus should automatically go to the next InputText field which is the CountryCode. I don't receive any errors and after entering 4 characters my backing bean method is called and run successfully however the focus on the gui does not change.

I suspect that maybe my code in the backing bean does not do what it is supposed to, maybe it does not find the CountryCode field.

The way this question is different than the ones tagged is that I cannot create a seperate in my project, hence no Jquery.

Doing ajax calls on each key-up is not a good thing performance wise. If your `onkeyup="return this.value.length >= 4"` works, why not do it in there, pure client-side. — Kukeltje, May 30 '17 at 09:35
@Kukeltje can you please tell me how? Because it should only fire after 4 values have been entered. Can you please help. — ITguy, May 30 '17 at 09:40
Read the other Q/A... also a non-jquery answer... AND PrimeFaces uses jquery so you already have that.. — Kukeltje, May 30 '17 at 09:42

yılmaz · Answer 1 · 2017-05-30T13:26:28.650

0

Something like that should work:

<div id="list">
    <p:outputLabel styleClass="heading" value="#{msg['content.search.title']}" />

    <p:outputLabel value="#{msg['content.search.bic']}" />

    <p:inputText styleClass="prefix" value="#{Controller.prefix}" maxlength="4" id="txtPrefix" onkeydown="if (document.getElementById('txtPrefix').value.length>=4) { document.getElementById('countryCode').focus(); return false; }">
        </p:inputText>

    <p:inputText id="countryCode" widgetVar="countryCode" styleClass="countryCode" value="#{Controller.CountryCode}" maxlength="2">                 
<\div>

edited May 30 '17 at 13:26

answered May 30 '17 at 10:05

yılmaz

1,818
13
15

I cannot use a seperate script. So this does not work for me. Shouldn't something like 'onkeyup="if(this.value.length >= 4) {PF('countryCode').Focus();}"' should work? – ITguy May 30 '17 at 12:51
i edited answer accordingly. – yılmaz May 30 '17 at 13:12
The Ajax call does not make any sense. This will just give you server load and uses bandwidth for nothing. – Jasper de Vries May 30 '17 at 13:22
i skipped to delete it, edited. – yılmaz May 30 '17 at 13:26

Automatically change focus to next input field after reaching maximum characters

1 Answers1