Geek Answers Handbook

JQuery focus does not allow movement

I use jQuery .focus()to make the focus of receiving a text field if the input is incorrect. But when a text field gains focus, it cannot lose it. I want the user to be able to select other text fields. How can i do this?

function checkpassword() {
  var password = $("#password").val();
  var password2 = $("#password-reenter").val();
if(password != null){
  if (password === password2) {
    //alert("Passwords match");

    $("#password-reenter").css('border','1px solid gray');
    $("#password-warning").hide();
    $("#password, #password-reenter").next('span').removeClass().addClass('ui-icon ui-icon-check');
  } else {

    $("#password-reenter").attr('title','The passwords do not match. Please reenter the password.').css('border','3px solid red').focus();


  }
}
};
+4
source share
3 answers

No problems found ...

You probably have some other code causing the trick.

Mark the snippet:

$("#password-reenter")
  .attr('title','The passwords do not match. Please reenter thepassword.')
  .css('border','3px solid red').focus();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="password-reenter" />
<input type="text" />
Run codeHide result

EDIT:

Looking at my code (this comment), I found the following:

<input type="password" name="password-reenter" id="password-reenter" onfocusout="checkpassword()" style="font-family: latine; border: 3px solid red;" required="" title="The passwords do not match. Please reenter the password.">

As you can see, the problem onfocusout="checkpassword()"is caused due to what it causes checkpassword(), which will focus again if the passwords do not match.

+3
source

, . , , . , , corrent .

:

  • . , .

  • , , , , , . . http://jsfiddle.net/04dcje0m/

    $('#element').on('blur', function (e) {

    if (this.value !== $('#password').val()) {

        if (this.className != 'invalid') {

            this.focus();

        }

        this.className = 'invalid';

    } else {

        this.className = '';

    }

});
0

Try using blur.

$("#password-reenter")
  .attr('title','The passwords do not match. Please reenter thepassword.')
  .css('border','1px solid 000000').blur();
-1
source

More articles:


All Articles