Question

如果输入不正确，我正在使用jQuery .focus()使文本框获得焦点。但是当文本框获得焦点时，它不会丢失它。我希望用户也能够选择其他文本框。我怎么能这样做？

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();


  }
}
};

Answer 1

没有发现问题......

你可能还有其他代码可以触发焦点。

检查代码段：

＆＃13;

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

＆＃13;

<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" />

＆＃13;

修改

在查看您的代码（在评论中给出）后，我发现了这个：

<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.">

正如您所看到的，onfocusout="checkpassword()"会导致您的问题，因为它会调用checkpassword()，如果密码不匹配，它会再次关注。

Answer 2

每次元素失去焦点时，您都在验证。如果您点击其他任何地方，它将失去焦点，再次验证并重新聚焦元素。这样，如果用户输入了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 = '';

    }

});

Answer 3

尝试使用模糊。

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

jQuery焦点不允许搬出去

3 个答案: