您如何确定您是否在文本区域的第一行或最后一行文本?

时间:2011-10-06 22:59:57

标签: javascript

我需要确定用户是否在textarea中的文本的第一行或最后一行。

原因是客户要求当用户在文本区域的文本顶行上按下向上箭头时,他们将被带到前一个表单字段,或者如果在文本的最后一行并按下用户转到下面的表单字段的向下箭头。

我找到了一种方法来确定光标所在的文本行,但只有在定义了textarea的行时才有效。页面上的大多数textarea都使用jQuery TextAreaExpander插件,因此它们的行没有设置。

2 个答案:

答案 0 :(得分: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('');
        }
    });
});

Live Demo

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

答案 1 :(得分:0)

如果你可以在keydown上获得光标位置,找到indexOf上一个(向上箭头)或下一个(向下箭头)换行符。如果为-1,请转到上一个或下一个字段。