如何確定您是在文本區域的第一行還是最后一行？

Question

我需要確定用戶是在文本區域的第一行還是最后一行。

這樣做的原因是客戶請求當用戶在文本區域中文本的第一行上按下向上箭頭時，它們被帶到前一個表單域，或者在文本的最后一行上按下向下箭頭用戶將被帶到以下表單字段。

我已經找到一種確定光標所在的文本行的方法，但是它僅在定義了textarea的行時才有效。 頁面上的大多數textarea都使用jQuery TextAreaExpander插件，因此未設置其行。

Answer 1

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

現場演示

在此示例中，我依賴於HTML5屬性： selectionStart 。 我不知道這是否可以在較舊的瀏覽器中使用。

Answer 2

如果可以在按下鍵盤上獲得光標位置，請找到上一個（向上箭頭）或下一個（向下箭頭）換行符的indexOf。 如果為-1，請轉到上一個或下一個字段。