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

如果我注意到这种行为，我在第一次之后添加了警报。

edit2：把它放在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次，然后再输入5次，我退格，直到第4个字段也为空。有时（但并不总是）当我再次进入4 5时，尽管它应该跳到5 5，我仍会跳跃。但这并不总是发生。有时我需要再次执行此操作才能在Chrome中查看此问题。

Answer 1

更新4 ：

我无法使用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 ：您为示例中的字段（1，2等）提供的ID，而有效 HTML < / em> 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); }

问题与$（this）.val（）。长度的铬 - 错误的值

1 个答案: