Question

这是包含CSS和js部分的HTML代码

    <html>
  <head>
    <meta charset=utf-8>
    <title>GUI Unit Testing page</title>
    <style type="text/css">
      .error {
        background-color: #F8E0E0;
      }
      .message {
        display: none;
        position: relative;
        height: 2em;
        width: 15em;
        font-size: 12px;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  </head>
  <body>
    <label>Test focusout</label><br>
    <form>
      <input type="text">
      <input type="text">
      <input type="text" id="contactPhoneID"> 
    </form>
    <br>
    <span id="errorMsgID" class="error message"></span>

    <script type="text/javascript">
      (function() {
        jQuery('#contactPhoneID').on('blur', function() {
          console.log('Focusout');
          var jQthis = jQuery(this);
          var phoneNo = jQthis.val();
          if (phoneNo.length === 0) {
            return;
          }
          var jQerror = jQuery("#errorMsgID");
          var thisOffset = jQthis.offset();
          var thisPos = jQthis.position();

          if (phoneNoValidate(phoneNo) === false) {
            jQerror.html("Phone number requires 10 digit");
            jQerror.offset({
              top: thisOffset.top,
              left: thisOffset.left + jQthis.width() + 10});
            jQerror.toggle(true);
            jQthis.addClass("error").focus();
          }
          else {
            jQerror.toggle(false);
            jQthis.removeClass("error");
          }
        });
      })();
      function phoneNoValidate(value) {
        return (value.replace(/\D+/g, '').length === 10);
      }
    </script>
  </body>
</html>

我想要做的是如果输入的电话号码没有10位数，则输入文本背景颜色会改变，再次获得焦点并在其旁边显示SPAN错误消息。这是我不明白的地方：

最初隐藏错误SPAN（显示：无，位置：相对）。我认为代码应该工作的方式是首先移动SPAN然后显示，因此输入文本不会移位。事实上，无论如何，输入文本总是向右移动。我在这里做错了什么？
当我输入电话号码并单击输入文本（contactPhoneID）时，焦点输出事件触发ONCE（基于console.log消息）。
但是，如果我删除输入文本，那么焦点就会触发TWICE。

当我在jsfiddle中粘贴此代码时，单击或标签远离输入字段仅触发焦点ONCE。用blur模糊替换焦点也无济于事。

任何人都可以对这种行为有所了解吗？我在Chrome中测试代码。

由于

jQuery焦点奇怪的行为

0 个答案: