JQuery - 当聚焦于文本框时，"|" 光标位置不正确

Question

我在 HTML 代码中有一个文本框：input type="text" id="text-input"

当用户按下“Enter”键时，我会使用以下代码使其获得焦点：

<script>
    $(document).keypress(function(e) {
        if(e.keyCode == 13) {
            $("#text-input").focus();
        }
    });
</script>

我正在使用的网页仅有一个文本框。当我点击到一个空白区域，然后按下回车，光标符号 "|" 就会向下错位。如果我一直重复点击并按下回车，原本应该在文本框内的 "|" 符号会越来越向下移动。

出了什么问题？

- Legendre

---

我猜你是在提到光标？用什么浏览器？也许有个jsfiddle的例子？ - chrismarx

提供一个测试用例的Jsfiddle和浏览器信息将非常有帮助。 - MetalFrog

我来帮忙：http://jsfiddle.net/RUb2P/ 我正在使用Chrome 18。要重现，请将鼠标光标放在文本框下方（外部）。单击，然后按Enter键。一遍又一遍地重复这两个步骤。此外，当输入文本时会发生一些奇怪的行为，但我没有具体的指示来使它们发生。 - Heitor Chang

哦，光标。浏览器：Google Chrome，最新版本。http://jsfiddle.net/n8PDc/1）单击文本框。光标正常。 2）单击附近的空白处以取消文本框聚焦状态。 3）按enter键实现聚焦。光标应该关闭。 - Legendre

Answer 1

尝试使用keyup而不是keypress

$(document).keyup(function(e) {
    if(e.keyCode == 13) {
        $("#text-input").focus();
    }
});​

示例：{{link1：keypress}}和{{link2：keyup}}

在Chrome中进行了测试，结果不同。

注意：keypress =（keydown和keyup 2个事件）。可能是问题所在，但不确定。

- The Alpha

---

使用keyup可以解决问题。谢谢！不过我希望知道实际原因是什么... :S - Legendre

Answer 2

我发现返回false可以纠正这种行为：

$(document).keypress(function(e) 
{
    if(e.keyCode === 13) 
    {
        $("#text-input").focus();

        return false;
    }
});​

---

为了改进这个问题，你可以使用 e.preventDefault(); 和 e.stopImmediatePropagation(); 的组合来代替 return false;，以确保一旦触发此处理程序，除了你想要的 .focus() 之外，不会发生任何其他事情：

$(document).keypress(function(e) 
{
    if (e.keyCode === 13) 
    {
        $("#text-input").focus();

        e.preventDefault();
        e.stopImmediatePropagation();
    }
});

唯一的注意事项是，e.stopImmediatePropagation(); 仅适用于在代码中定义此处理程序之后定义的事件处理程序。这意味着，如果您在 .focus() 之前将另一个处理程序绑定到文档的 keypress 上，则它将继续被触发。因此，为了确保只调用此处理程序，您需要确保它是在代码中定义的第一个处理程序。 在此处查看示例

- Code Maverick

---

这个也可以，谢谢！但我会选择使用keyup，因为JQuery文档说keypress在不同的浏览器中可能有不同的行为。你知道为什么返回false会起作用吗？ - Legendre

return false; === e.preventDefault(); && e.stopPropagation();意为阻止事件的默认行为并停止事件的传播。 - Code Maverick

谢谢你的详细解释。 :) - Legendre