jQuery焦点奇怪的行为

时间:2012-10-11 12:54:17

标签: jquery focusout

这是包含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错误消息。 这是我不明白的地方:

  1. 最初隐藏错误SPAN(显示:无,位置:相对)。我认为代码应该工作的方式是首先移动SPAN然后显示,因此输入文本不会移位。事实上,无论如何,输入文本总是向右移动。 我在这里做错了什么?

  2. 当我输入电话号码并单击输入文本(contactPhoneID)时,焦点输出事件触发ONCE(基于console.log消息)。
    但是,如果我删除输入文本,那么焦点就会触发TWICE。

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

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

    由于

0 个答案:

没有答案