Question

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

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

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

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();
    }
}

Got it from this site

要捕获击键，你可以在这里使用jQuery就是答案：

Binding javascript to keys

Answer 2

按下某个键时阻止默认处理

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

在processKey（事件）中进行处理
根据您的处理设置插入位置

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();
    }
}

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

2 个答案: