你如何确定你是在文本区域的第一行还是最后一行？答案

【问题标题】：How do you determine if you are on the first or last line of text in a textarea?你如何确定你是在文本区域的第一行还是最后一行？
【发布时间】：2011-10-06 22:59:56
【问题描述】：

我需要确定用户是在文本区域中文本的第一行还是最后一行。

这样做的原因是客户端要求当用户在文本区域的第一行文本中按下向上箭头时，他们将被带到上一个表单字段，或者如果在文本的最后一行并按下用户被带到以下表单字段的向下箭头。

我找到了一种方法来确定光标在哪一行文本上，但它只有在定义了文本区域的行时才有效。页面上的大部分文本区域都使用 jQuery TextAreaExpander 插件，所以它们的行没有设置。

【问题讨论】：

标签： javascript

【解决方案1】：

如果可以在keydown上获取光标位置，则查找上一个（向上箭头）或下一个（向下箭头）换行符的索引。如果为 -1，则转到上一个或下一个字段。

【讨论】：

这应该是公认的答案。 @James 解决方案并非在所有情况下都有效 - 我在评论中描述了它 (stackoverflow.com/questions/7681426/…)

【解决方案2】：

以下 HTML 和 JavaScript 组合在 Chrome 中适用于我：

HTML：

<input id="bta"><br><br>
<textarea id="ta" cols="10" rows="2"></textarea><br><br>
<input id="ata">

JavaScript（使用 jQuery）：

$(function() {
    var $ata = $('#ata'),
        $bta = $('#bta'),
        $ta = $('#ta');

    $ta.bind('keyup', function(e) {
        if (this.selectionStart === 0 && e.keyCode === 38) {
            $bta.val('Going up!').focus();
            $ata.val('');
        } else if (this.selectionStart === this.value.length && e.keyCode === 40) {
            $ata.val('Going down!').focus();
            $bta.val('');
        }
    });
});

Live Demo

在此示例中，我依赖于 HTML5 属性：selectionStart。我不知道这是否适用于旧版浏览器。

【讨论】：

如果我意识到当您向上或向下移动时光标移动到第一行或最后一行时，光标会移动到行的开头或结尾，这将不会那么痛苦。谢谢你的代码。幸运的是我不必担心旧版浏览器，所以这个解决方案很漂亮。
如果您的光标位于第二行的开头并按向上箭头，则它不起作用（如果您在倒数第二行的末尾并按向下箭头，它就不起作用））。因此@kennebec 的答案更好，因为它适用于任何情况。