Keep your focus on Inputtext

Question

I have a form with two Inputtext, I need the focus always remain in the Input and only pass to the following via script, in case the user clicks outside the Input, the focus needs to remain in the Input. I’m trying to set the focus, but I’m not getting it. I even tried the Firefox console (document.getElementById("login").focus();), but I get the Undefined message. In the following code, the expected result would be to keep the focus on Input by clicking anywhere on the screen, but only Alert is being displayed. Any tips? Thanks for the help.

HTML

login:<br><s:textfield name="login" id="login" required="true" cssStyle="width:287px; height:20px;" onblur="this.style.backgroundColor='#F7F5E9'" onfocus="this.style.backgroundColor='#FFFFFF'"/>

Script

$(document).ready(function() {

    var txtLogin = document.getElementById("login");

    txtLogin.addEventListener('blur', event => {
      event.preventDefault();
      alert('Passei aqui!!!')
      txtLogin.focus();
    });

});

Answer 1

I did this example with jQuery, it works so you have two input one mandatory, and another desable, then you can’t click on input that is disabled.

When you fill in the required one it removes the desabled of the other input in the keyup.

OBS: if you want to style the input:disabled just use the pseudo class :disabled. Notice that I removed the tabindex of the first input when it is already valid, even so with keyboard it becomes inaccessible. In the script when you click on the document it focuses on the first input, but if that input been :valid if you click on the document it will focus on the other input, also in CSS I stylized the input:valid to not have mouse event.

$(document).on('click', function () {
	$('#nome').focus();
	if ($('#nome:valid')) {
		$('#pass').focus();
	}
});

$('#nome').keyup(function () {
	if ($(this).val()) {
		$(this).attr("tabindex","-1").siblings('input').prop('disabled', false);
	}
});

input:valid {
	pointer-events: none;
	user-select: none;
}
:disabled {
	background:azure;
	border-color:red;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<input autofocus type="text" id="nome" required autocomplete="off">
<input type="text" id="pass" disabled required>

Answer 2

Hello, it looks like you’re using jQuery, right? Try to focus the input on any screen click by using the function click.

$(document).ready(function(){
    $(document).on("click", function(){
        var campoLogin = $("#login");
        var campoSenha = $("#password");

        // Verifica se campo login está focado e se o clique não foi no campo de senha
        if(campoLogin.is(":focus") && $(this).attr("id") != "password"){
            campoLogin.focus();
        }else{
            campoSenha.focus();
        }
    });
});

I hope I helped, hug!