18

我正在使用一个名为jQuery TextRange的插件来获取光标在输入中的位置（在我的例子中是 textarea）并设置位置。

但现在我有一件事——我认为——更难解决。我想知道在 jQuery 中是否存在像“光标位置改变”这样的事件。我的意思是这样的：

$('#my-input').on('cursorchanged', function(e){
    // My code goes here.
)};

我想知道光标何时在输入/文本区域内移动，不管是通过箭头键还是鼠标单击。我是 jQuery 新手，但我认为 jQuery 上不存在这样的事件，或者存在？

4

3 回答 3

22

不，没有像“光标位置改变”这样的事件。

但是如果你想知道光标位置是否改变了，你可以这样做：用jquery 1.7测试，我用Ie8和chrome测试

var last_position = 0;
$(document).ready(function () {
    $("#my_input").bind("keydown click focus", function() {
        console.log(cursor_changed(this));
    });
});

当光标改变时，console.log 将返回。

function cursor_changed(element) {
    var new_position = getCursorPosition(element);
    if (new_position !== last_position) {
        last_position = new_position;
        return true;
    }
        return false;
}

function getCursorPosition(element) {
    var el = $(element).get(0);
    var pos = 0;
    if ('selectionStart' in el) {
        pos = el.selectionStart;
    } else if ('selection' in document) {
        el.focus();
        var Sel = document.selection.createRange();
        var SelLength = document.selection.createRange().text.length;
        Sel.moveStart('character', -el.value.length);
        pos = Sel.text.length - SelLength;
    }
    return pos;
}
于 2013-11-06T03:56:09.817 回答
1

我自己也需要这样的东西，所以基于@RenatoPrado 解决方案，我创建了一个 jQuery 扩展（它在 npm - jquery-position-event 上）。

要使用它，您可以添加标准事件：

var textarea = $('textarea').on('position', function(e) {
   console.log(e.position);
});

如果你想要初始值，你可以使用：

var textarea = $('textarea').on('position', function(e) {
   console.log(e.position);
}).trigger('position');

该事件还具有有用的列和行属性。

于 2019-12-13T23:40:47.630 回答
0

在纯 JS 中，还记得插入符号的位置，如果缺少事件，请告诉我。

const textarea = document.querySelector('textarea')

const storeCaretPos = () =>
  requestAnimationFrame(() =>
    localStorage.setItem('caretPos', textarea.selectionStart),
  )

textarea.oninput = textarea.onclick = textarea.oncontextmenu = storeCaretPos

textarea.onkeyup = ({ key }) => {
  if (['Arrow', 'Page', 'Home', 'End'].some(type => key.startsWith(type))) {
    storeCaretPos()
  }
}
于 2021-02-19T05:28:56.717 回答