javascript 在jQuery中检测“输入中的光标位置改变”?

bpsygsoo  于 2023-02-02  发布在  Java
关注(0)|答案(4)|浏览(272)

我正在使用一个名为jQuery TextRange的插件来获取光标在输入区域(在我的例子中,是文本区域)中的位置,并设置位置。
但现在我有一件事-我认为-更难解决。我想知道在jQuery中是否存在一个像“光标位置改变”这样的事件。我的意思是这样的:

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

我想知道什么时候光标在输入/文本区域内移动,不管是通过箭头键还是鼠标点击。我是一个jQuery新手,但我认为jQuery上不存在这样的事件,还是存在?

m1m5dgzv

m1m5dgzv1#

不,没有像“光标位置改变”这样的事件。
但是如果你想知道光标位置是否改变了,你可以这样做:我用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;
}
aij0ehis

aij0ehis2#

我自己也需要这样的东西,所以基于@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');

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

soat7uwm

soat7uwm3#

在纯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()
  }
}
bxjv4tth

bxjv4tth4#

在React中,我们可以为input标记添加一个onSelect事件处理程序。在js中,它将是onselectstarthttps://learn.javascript.ru/selection-range#sobytiya-pri-vydelenii。

相关问题