jquery - chrome 中的 $(this).val().length 问题 - 错误值

Question

我在 chrome 中使用以下 JQuery:$(this).val().length这表示一个输入字段。
现在在所有其他浏览器中这都可以正常工作，但在 Chrome 中它有时会返回错误的值。
假设我在输入字段中有 3 个字符，但 alert($(this).val().length);会说4。

有谁知道为什么会发生这种情况以及可能的解决方案？

编辑:
一些代码

$("#fieldset1 input[type=text]").keyup(function(e){
    if($(this).val().length == $(this).attr('maxlength')){
                if($(this).parent().children().last().attr('id') == $(this).attr("id")){
                    $(this).parent().next().find(':input').focus();
                }else{
                    $(this).next("input").focus();
                }
            }
});

当我注意到这种行为时，我在第一个之后添加了警报。

编辑2:把它放在JSFiddle: http://jsfiddle.net/QyyBV/

HTML:

<fieldset id ="test">
  <input type="text" id="1" maxlength="5" size="5"/>
  <input type="text" id="2" maxlength="5" size="5"/>
  <input type="text" id="3" maxlength="5" size="5"/>
  <input type="text" id="4" maxlength="5" size="5"/>
  <input type="text" id="5" maxlength="5" size="5"/>
</fieldset>

JavaScript:

      $(document).ready(function() {

          $("#test input[type=text]").keydown(function(e){
            if(e.which == 8){
              if($(this).val().length == 0){
                $(this).prev().focus().val($(this).prev().val());
              }
            }
          });

          $("#test input[type=text]").keyup(function(e){


if($(this).val().length == $(this).attr('maxlength') ){
          if($(this).parent().children().last().attr('id') == $(this).attr("id")){
            $(this).parent().next().find(':input').focus();
          }else{
            $(this).next("input").focus();
          }
        }
      });

  });

场景 : 我输入 5 4 次，然后再输入 5 一次，我退格直到第 4 个字段也为空。有时(但并非总是)当我再次进入 4 5 时，我会跳，尽管它应该在 5 5 时跳。
但这并不总是发生。有时我需要再做一次才能在 Chrome 中看到这个问题。

Answer 1

更新 4 :

我无法在您的 fiddle 中使用 Chrome(适用于 Linux)来复制问题。

但我注意到你正在使用 keydown对于蒙版编辑的一方面，但 keyup对于它的另一个方面。除非有充分的理由使用 keyup而不是 keydown , 我会使用 keydown对于两者 - 尤其是因为键重复与您正在创建的蒙版编辑一起正常工作(例如，如果我按下“5”并按住它，我会按照我的预期从一个字段切换到另一个字段，而不是在结束时停止第一个字段)。

Here's my slightly-edited version使用 keydown .似乎工作正常(但是，您的原件也没有对我显示问题，可能是特定于操作系统的):

$(document).ready(function() {

    $("#test input[type=text]").keydown(function(e){
        var $this = $(this),
            val = $this.val(),
            $prev,
            $parent;

        if(e.which == 8){
            if(val.length == 0){
                $prev = $this.prev();
                $prev.focus().val($prev.val());
            }
        }
        else if(val.length == $this.attr('maxlength') ){
            $parent = $this.parent();
            if($parent.children().last().attr('id') == $this.attr("id")){
                $parent.next().find(':input').focus();
            }else{
                $this.next("input").focus();
            }
        }

    });

});

谁知道呢，也许这可以解决您看到的奇怪问题。

题外话 1 :

我没有在上面做，但是因为 next()如果选择器不匹配，将返回一个空的 jQuery 对象，您可以替换

if($parent.children().last().attr('id') == $this.attr("id")){
    $parent.next().find(':input').focus();
}else{
    $this.next("input").focus();
}

和

$next = $this.next("input");
if($next.length == 0) {
    $next = $parent.next().find(':input:first');
}
$next.focus();

...(当然，在顶部声明 $next 和 var)。这避免了对 $parent.children().last().attr('id') == $this.attr("id") 的需要，这是不必要的工作。您可以向退格键添加等效功能:

if(val.length == 0){
    $prev = $this.prev();
    if($prev.length == 0) {
        $prev = $this.parent().prev().find(':input:last');
    }
    $prev.focus().val($prev.val());
}

Live example . FWIW。

题外话2 :您在示例中为字段提供的 ID( 1、 2 等)虽然是有效的 HTML ID，但为 invalid for use with CSS selectors . CSS 中的 ID 不能以数字开头(或其他一些东西，请参阅链接了解详细信息)。我提到这一点是因为我们在 jQuery 中经常使用 CSS 选择器......

题外话3 : 反复调用 $(this)使您的浏览器比它必须的更努力地工作。每次执行此操作时，jQuery 都会执行两次函数调用和一次内存分配。这可能不是问题，但很少有理由不将结果缓存在局部变量中，例如 var $this = $(this); .



以前更新的答案 :

更新 3 :

您提到它偶尔会发生，并且您提到了退格，但引用的代码对退格没有任何作用。所以真的，一个精简的、独立的、功能性的例子将是找到这个的关键。听起来像是事件顺序与焦点的浏览器差异(因为您正在修改焦点)，但是......

更新 2 :

重新评论它是 keyup处理程序，我仍然没有看到这种行为:

$('#theField').keyup(function() {
  if ($(this).val().length == $(this).attr("maxlength")) {
    display("Field is at maximum, length = " +
            $(this).val().length);
  }
  else {
    display("Field is not at maximum, length = " +
            $(this).val().length);
  }
});

Live copy

请注意，您最新发布的代码(截至撰写本文时)存在语法错误(应以 }); 结尾，而不仅仅是 }; )，但我猜这是复制粘贴的副作用。

建议将您的代码缩减到最低限度，并将其发布到 JSBin或 jsFiddle或类似的，我们可以帮助您找到问题。

更新 1 :

我的猜测(更多上下文会有所帮助!它在哪个事件处理程序中？)您是在 keypress 中执行此操作吗？处理程序。截至 keypress事件，该角色尚未(尚未)添加到该字段中。 Live example :

$('#theField').keypress(function() {
  if ($(this).val().length == $(this).attr("maxlength")) {
    display("Field is at maximum, length = " +
            $(this).val().length);
  }
  else {
    display("Field is not at maximum, length = " +
            $(this).val().length);
  }
});

function display(msg) {
  $('<p/>').html(msg).appendTo(document.body);
}

据我所知，这是跨浏览器的可靠行为，所以如果你真的只在 Chrome 上看到，也许你正在使用另一个我没有太多经验的事件。例如，以上在 Firefox 中很好。

在任何情况下，如果问题是事件发生得太早，而您正在尝试做的事情，您可以轻松地推迟它:

$('#theField').keypress(function() {
  var $this = $(this);
  setTimeout(function() {
    if ($this.val().length == $this.attr("maxlength")) {
      display("Field is at maximum, length = " +
              $this.val().length);
    }
    else {
      display("Field is not at maximum, length = " +
              $this.val().length);
    }
  }, 0);
});

Live example

原答案 :

我怀疑该字段中确实有四个字符。当然，它在 Chrome 中使用 this live example 可以正常工作:

HTML:

<form>
    <input type='text' id='theField' value='123'>
</form>

JavaScript:

display('Length is ' + $('#theField').val().length);

function display(msg) {
  $('<p/>').html(msg).appendTo(document.body);
}