如何通過javascript在文本區域中插入/刪除字符

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

從這個網站得到它

要捕獲擊鍵，你可以在這里使用jQuery就是答案：

將javascript綁定到鍵

Answer 2

1. 按下某個鍵時防止默認處理

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

2. 在processKey（事件）中進行處理

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