Question

假设我们的html代码中有textarea 这个textarea包含一些。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Cursor Test</title>
</head>
<body>
    <textarea class="text" cols="200" rows="40">
Some Random text.
More random text
> [fixed cursor position]
    </textarea>
</body>
</html>

是否可以防止光标移动到指定位置之上或之前？ （在标记为[fixed cursor position]的代码中）
我想仍然可以写，但我不想超过起始位置。（在起始位置之上或之前 - > [fixed cursor position] ）

因此，如果焦点在textarea，则光标应该在键入时移动到其位置。（onKeyPress，仍然可以选择并标记textarea中的文字）

在这种情况下 - ＆gt; （至少）第3行，第3栏

这可以在JavaScript或JQuery中完成吗？

Answer 1

有一个小功能可以帮助你：

jQuery.fn.lockCursor = function() {

    return this.each(function() { //return the function for each object

        if (this.setSelectionRange) { //check if function is available

            var len = $(this).val().length * 2; //avoid problems with carriage returns in text
            this.setSelectionRange(len, len);

        } else {

            $(this).val($(this).val()); //replace content with itself
            //Will automatically set the cursor to the end

       }

    });

};
$('.text').keypress(function(){
    $(this).lockCursor(); //execute function on keypress
});

<强> Demo

修改

我更新了我的代码，以便编辑自己添加的文本：

var selectEnd; //global variable jQuery.fn.lockCursor = function() { return this.each(function() { var len = $(this).val().length * 2; this.setSelectionRange(len, len); }); }; $('.text').focus(function(){ $(this).lockCursor(); selectEnd = $(this).val().length; //save original length of value }); $('.text').keypress(function(){ if($(this)[0].selectionStart < selectEnd){ //cursor position is lower then initial position $(this).lockCursor(); } });

说明：

$(this)[0].selectionStart是必要的，因为它必须只是一个元素而不是jQuery-Object提供的一组元素

注意：此解决方案可能与所有浏览器和版本不兼容，具体取决于他们对{{1}} -method
的支持
<强> Demo 2

<强>参考

setSelectionRange

是否可以将光标锁定/聚焦到textarea的最后一行？

1 个答案: