Disable a p:inputText by focusing the cursor on another p:inputText

Question

Hello! I’m having trouble getting a validation. Here’s the thing... I have a form made inside the components Primefaces 4.0 that has the fields "Cellular" and "Telephone". My intention is that the form starts with these two fields enabled, but when the mouse cursor focuses on one of them, the other is disabled, causing only "Mobile" or "Phone" to be filled by the user.

I thought about using ajax events (Focus, Blur and keyup ), but so far I did not get a good result. Well, follow my view:

<h:form>
    <h:panelGrid columns="2">

        <h:outputText value="Telefone: " />
        <p:inputText id="out1" value="#{listenerView.telefone}">
            <p:ajax event="focus" update="out2"
                listener="#{listenerView.handleKeyEvent}"
                disabled="#{listenerView.telefoneNulo}" immediate="true"/>
        </p:inputText>


        <h:outputText value="Celular: " />
        <p:inputText id="out2" value="#{listenerView.celular}">
            <p:ajax event="focus" update="out1"
                listener="#{listenerView.handleKeyEvent}"
                disabled="#{listenerView.celularNulo}" immediate="true" />
        </p:inputText>


    </h:panelGrid>
</h:form>

And my MB (listenerView.java):

public class listenerView {

private String telefone;
private String celular;
private boolean telefoneNulo;
private boolean celularNulo;

public boolean isTelefoneNulo() {
    return telefoneNulo;
}

public void setTelefoneNulo(boolean telefoneNulo) {
    this.telefoneNulo = telefoneNulo;
}

public boolean isCelularNulo() {
    return celularNulo;
}

public void setCelularNulo(boolean celularNulo) {
    this.celularNulo = celularNulo;
}

public String getTelefone() {
    return telefone;
}

public void setTelefone(String telefone) {
    this.telefone = telefone;
}

public String getCelular() {
    return celular;
}

public void setCelular(String celular) {
    this.celular = celular;
}

public void handleKeyEvent() {
    if (telefone == null) {
        telefoneNulo = true;
    } else {
        if (celular == null) {
            celularNulo = true;
        }
    }
}

}

Any idea what I’m doing wrong? Thank you.

Answer 1

Alessanda,

The estate disabled is actually part of p:inputText. Another thing: the immediate is it necessary? If not, remove it. Just put the handleKeyEvent for the event of keyup of inputText. So just the user type or delete something from the input, that the other field will be enabled or not.

Still working code:

Listenerview class:

import javax.faces.bean.ManagedBean;

@ManagedBean(name = "listenerView")
public class ListenerView {

    private String telefone;
    private String celular;
    private boolean desabilitarCelular;
    private boolean desabilitarTelefone;

    public String getTelefone() {
        return telefone;
    }

    public void setTelefone(String telefone) {
        this.telefone = telefone;
    }

    public String getCelular() {
        return celular;
    }

    public void setCelular(String celular) {
        this.celular = celular;
    }

    public boolean isDesabilitarCelular() {
        return desabilitarCelular;
    }

    public void setDesabilitarCelular(boolean desabilitarCelular) {
        this.desabilitarCelular = desabilitarCelular;
    }

    public boolean isDesabilitarTelefone() {
        return desabilitarTelefone;
    }

    public void setDesabilitarTelefone(boolean desabilitarTelefone) {
        this.desabilitarTelefone = desabilitarTelefone;
    }

    public void handleKeyEvent() {
        if (telefone != null && telefone.length() > 0) {
            desabilitarCelular = true;
        } else if (celular != null && celular.length() > 0) {
            desabilitarTelefone = true;
        }
    }
}

Excerpt from the form:

<h:form>
    <h:panelGrid columns="2">

        <h:outputText value="Telefone: " />
        <p:inputText id="telefone" value="#{listenerView.telefone}" disabled="#{listenerView.desabilitarTelefone}">
            <p:ajax event="keyup" update="celular" listener="#{listenerView.handleKeyEvent}" />
        </p:inputText>


        <h:outputText value="Celular: " />
        <p:inputText id="celular" value="#{listenerView.celular}" disabled="#{listenerView.desabilitarCelular}">
            <p:ajax event="keyup" update="telefone" listener="#{listenerView.handleKeyEvent}" />
        </p:inputText>


    </h:panelGrid>
</h:form>

Abcs!

Answer 2

If you use jquery it is very simple:

$("#out1, #out2").focus(function(){
 $("#out1, #out2").attr("disabled","disabled");
 $(this).removeAttr("disabled");
});