javascript - 如何通过javascript在文本区域中插入/删除字符

Question

如何通过 javascript 在文本区域中添加/删除字符。假设我通过屏幕键盘输入。我需要模拟尽可能多的键，例如退格、删除、回车。更具挑战性的任务是为文本区域维护一个伪光标，并在从键盘接收输入时移动光标。

因此，如果我按下左箭头并且我有一个伪光标的轨迹，那么我需要将光标向后移动一个位置，然后从该位置插入/删除字符。

我希望我已经说清楚了。任何帮助表示赞赏。

Answer 1

这是一个读取和设置光标位置的函数：

function doGetCaretPosition (ctrl) {
    var CaretPos = 0;   // IE Support
    if (document.selection) {
    ctrl.focus ();
        var Sel = document.selection.createRange ();
        Sel.moveStart ('character', -ctrl.value.length);
        CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0')
        CaretPos = ctrl.selectionStart;
    return (CaretPos);
}
function setCaretPosition(ctrl, pos){
    if(ctrl.setSelectionRange)
    {
        ctrl.focus();
        ctrl.setSelectionRange(pos,pos);
    }
    else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

从这个网站得到它

要捕获击键，您可以使用 jQuery，这是一个答案：

将javascript绑定到键

Answer 2

1. 防止按下键时的默认处理

$('#textArea').keypress(function(event) {
  //console.log("Key down:" + event.keyCode);
  event.preventDefault();
  processKey(event);
});

2. 在 processKey(event) 中进行处理

3. 根据您的处理设置插入符号位置

function setCaretPosition(pos){
    var target = document.getElementById("target"); 
    if(target.setSelectionRange) {
        target.focus();
        target.setSelectionRange(pos,pos);
    }
    else if (target.createTextRange) {
        var range = target.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}