Question

任何人都可以解释一下为什么焦点命令在警报（启用但在我使用我的errmsgPopper函数时不起作用但是现在代码不起作用）时正常工作？

$(document).on('pageinit', function(){
  // Register a new user
  $(document).on('click', '#Register', function(evnt) {
    if (userName == "" || password == "" || emailAddress == "") {
//      alert("Complete all the input fields");
      errmsgPopper("Complete all the input fields");
      // This next line works correctly if the alert( is used instead of the
      //  errmsgPopper function above
      $('input:text[value=""], input:password[value=""]').first().focus();
      evnt.stopImmediatePropagation();
      return false;
    }
  });

  // Popup error message for 2 seconds
  function errmsgPopper(msg){
    $('#errmsgDiv').html(msg).popup('open', {
      positionTo: $('input:text[value=""], input:password[value=""]').first()
    });
    setTimeout(function(){
      $('#errmsgDiv').popup('close');
    },2000);
  }

  // Save the User name
  $(document).on('blur', '#UserName', function(evnt) {
    var $target = $(evnt.target); 
    userName = $target.val();
  });

  // Save their password
  $(document).on('blur', '#Password', function(evnt) {
    var $target = $(evnt.target); 
    password = $target.val();
  });

  // Save their email address
  $(document).on('blur', '#EmailAddress', function(evnt) {
    var $target = $(evnt.target); 
    emailAddress = $target.val();
  });

});

HTML：

  <div id="LoginPage" data-role="page">

    <div data-role="header"><h1>Login to ECG</h1>
      <a id="LoginClick" href="#LoginSubmit" title="Submit login details">Submit</a>
      <a id="Register" href="#LoginPage" align="right" title="Register new user">Register</a>
    </div>

    <div data-role="content">
      <form>
        <div>
          <label for="UserName">User name</label>
          <input id="UserName" title="Enter your User Name" tabindex="1" type="text" placeholder="User name" maxlength="10" autofocus>
        </div>
        <div>
          <label for="Password">Password</label>
          <input id="Password" title="Enter your Password" tabindex="2" type="password" placeholder="Password" maxlength="10">
        </div>
        <div>
          <label for="EmailAddress">Email address</label>
          <input id="EmailAddress" title="Enter your email address" tabindex="3" type="text" placeholder="Email address" maxlength="40">
        </div>
      </form>
    </div>

    <div data-role="footer"><h1>Educational card games</h1>
      <a href="#" title="Retrieve your password">Lost PW</a>
    </div>

  </div>

errmsgDiv：

  <div id="errmsgDiv" data-role="popup"><p>msg text</p></div>

我没有设置小提琴，因为我怀疑有一个简单的答案......

Answer 1

如果没有更多信息，这是一种猜测，但请尝试：

function errmsgPopper(msg, callback){
    $('#errmsgDiv').html(msg).popup('open', {
        positionTo: $('input:text[value=""], input:password[value=""]').first()
    });
    setTimeout(function(){
        $('#errmsgDiv').popup('close');
        if (callback && typeof callback === "function") {
            callback();
        }
    },2000);
}

然后你改变了对此的号召：

errmsgPopper("Complete all the input fields", function() { 
    $('input:text[value=""], input:password[value=""]').first().focus();
});

现在你的焦点只会在弹出窗口关闭后改变。

Answer 2

当弹出处于活动状态时，页面会失去焦点以及其中的任何元素。或者，您可以在隐藏/关闭弹出窗口后focus()。

修改setTimeout以关注popupafterclose事件。

setTimeout(function () {
  $('#errmsgDiv').popup({
    afterclose: function () {
      $("input[value='']").first().focus();
    }
  }).popup("close");
}, 2000);

此外，您需要手动初始化 外部弹出窗口。

$(function () {
  $("#errmsgDiv").popup();
});

更新

我已使用此little snippet ^（1）确定空字段，然后在第一个字段确定focus()。

var checkEmpty = $('form input').filter(function () {
  return $.trim($(this).val()) == '';
});

这将返回所有空字段的对象，选择.first()一个来定位弹出窗口和焦点。

完整代码

$(document).on('pageinit', function () {
    var checkEmpty; /* global */
    $(document).on('click', '#Register', function (evnt) {
        checkEmpty = $('form input').filter(function () {
            return $.trim($(this).val()) == '';
        });
        if ($("#UserName").val() == "" || $("#Password").val() == "" || $("#EmailAddress").val() == "") {
            errmsgPopper("Complete all the input fields");
            return false;
        }
    });

    function errmsgPopper(msg) {
        $('#errmsgDiv').html(msg).popup('open', {
            positionTo: $(checkEmpty).first()
        });
        setTimeout(function () {
            $('#errmsgDiv').popup({
                afterclose: function () {
                    $(checkEmpty).first().focus();
                }
            }).popup("close");
        }, 2000);
    }
});

<强> Demo

^{（1）归功于@thecodeparadox}

调用函数后.focus（）无法正常工作

2 个答案:

更新

完整代码