如何使用 JS 或 jQuery 确定文本区域中的光标是在第一行还是最后一行？答案

【问题标题】：How can I work out whether the cursor in a textarea is in the first or last line, using JS or jQuery?如何使用 JS 或 jQuery 确定文本区域中的光标是在第一行还是最后一行？
【发布时间】：2023-04-06 21:38:01
【问题描述】：

请注意换行和换行的区别。示例：

<!DOCTYPE html>
    <html>
        <body>
            <form action="/action_page.php">
                <textarea rows="2" cols="20" name="usrtxt" wrap="soft">
                    I'am only one line without line breaks. Look joe I don't break but I wrap.
                </textarea>
                <input type="submit">
            </form>
        </body>
    </html>

https://jsfiddle.net/b5dtjvbo/1/

我想知道光标是在第一行还是最后一行。就像在文本区域的顶部或底部一样。

【问题讨论】：

Get current cursor position in a textbox的可能重复
没有@lazzy_ms ！它不是！您只需要阅读标题即可。
在此处查看已接受的答案。
看看我的标题。复杂得多。请跳过这个。

标签： javascript jquery textarea

【解决方案1】：

是对文本区域进行像素测量的唯一解决方案，然后计算这些像素宽度中适合多少字母？

【讨论】：

【解决方案2】：

你可以用这个来做类似的事情，你可以得到鼠标的位置

var indicator = document.getElementById("indicator");
var textarea = document.getElementById("textarea");
     
     setInterval(function() { 
     indicator.value = caret(textarea);
     }, 100);
  
    
    function caret(node) {
    if(node.selectionStart) return node.selectionStart;
     else if(!document.selection) return 0;
     var c		= "\001";
     var sel	= document.selection.createRange();
     var dul	= sel.duplicate();
     var len	= 0;
     dul.moveToElementText(node);
     sel.text	= c;
     len		= (dul.text.indexOf(c));
     sel.moveStart('character',-1);
     sel.text	= "";
     return len;
    }

<textarea id="textarea" style="width:80%;height:100px;">
I'am only one line without line breaks. Look joe I don't break but I wrap.
</textarea><br>
<input type="text" id="indicator" style="width:25px;">

【讨论】：

我需要的不仅仅是鼠标位置。谢谢
更多 ??如果您询问添加更多行并获得位置，请尝试它会起作用。这只是一个例子，你拿到 Position 后想做什么？
阅读标题@v8
这可能会进入聊天，你可以做一件事提供固定大小的文本然后使用上面的代码来知道位置，不知道你的要求是什么但你可以这样做。最好的例子是堆栈溢出的评论部分，它允许您输入有限的字符:)
谢谢，但我想这是不可能的，因为我无法限制文本，而且它应该适用于所有可能的文本区域。就像滚动条一样，没有每个尺寸。我的要求是能够通过预定义的键盘快捷键跳出文本区域。例如，当在第一行按下箭头时直接跳出

【解决方案3】：

请参考以下sn-p，

    <html>
    <head>
    <script>
        function f1(el) {
        var val = el.value;
        var position=val.slice(0,el.selectionStart).length;
        //  alert(position)
        if(parseInt(position)>=0 && parseInt(position)<=18)
          alert("cursor is on top line")
        else if(parseInt(position)>=19 && parseInt(position)<=39)
          alert("cursor is on middle line")
        else
          alert("cursor is on last line")


    }
    </script>
    </head>
    <body>

<textarea rows="2" cols="20" id='t1' name="usrtxt" wrap="soft" onclick="f1(document.getElementById('t1'))">
I'am only one line without line breaks. Look joe I don't break but I wrap.
</textarea>


</body>
    </html>

我编辑的答案........

我尝试在添加更多行后动态获取位置

为此，我推荐https://github.com/component/textarea-caret-position 这个url，并修改原始源代码

请参考以下jsfiddle https://jsfiddle.net/6u1gwfeh/1/

希望这能满足您的要求！！

【讨论】：

这段代码有错误只要尝试添加更多行并运行你会发现它，即使你添加更多行它也会发出警报（“光标在最后一行”）
@v8 sagar 如果您添加更多行，那么您还需要相应地更新 f1 函数然后它才会起作用。
这不可行的解决方案 Bhau hech sangtoy me
@Miso 请看我编辑的答案希望这对你有帮助！！
@AbhijeetKale 如果我没记错的话，那只是为了找到光标位置。我需要更多。