Question

在输入字段中，如果用户按下退格键或删除键，是否有办法获取已删除的字符。

我需要针对RegExp进行检查。

Answer 1

以下内容适用于所有主要浏览器的文本<input>元素。它不应该用于<textarea>元素，因为getInputSelection函数不能正确解释IE中的换行符。有关将执行此操作的（更长）函数，请参阅this answer。

function getInputSelection(input) {
    var start = 0, end = 0;
    input.focus();
    if (    typeof input.selectionStart == "number" &&
            typeof input.selectionEnd == "number") {

        start = input.selectionStart;
        end = input.selectionEnd;
    } else if (document.selection && document.selection.createRange) {
        var range = document.selection.createRange();
        if (range) {
            var inputRange = input.createTextRange();
            var workingRange = inputRange.duplicate();
            var bookmark = range.getBookmark();
            inputRange.moveToBookmark(bookmark);
            workingRange.setEndPoint("EndToEnd", inputRange);
            end = workingRange.text.length;
            workingRange.setEndPoint("EndToStart", inputRange);
            start = workingRange.text.length;
        }
    }
    return {
        start: start,
        end: end,
        length: end - start
    };
}

document.getElementById("aTextBox").onkeydown = function(evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode;
    var deleteKey = (keyCode == 46), backspaceKey = (keyCode == 8);
    var sel, deletedText, val;
    if (deleteKey || backspaceKey) {
        val = this.value;
        sel = getInputSelection(this);
        if (sel.length) {
            deletedText = val.slice(sel.start, sel.end);
        } else {
            deletedText = val.charAt(deleteKey ? sel.start : sel.start - 1);
        }
        alert("About to be deleted: " + deletedText);
    }
};

Answer 2

不，没有存储已删除字符的变量。除非您有Undo / Redo的历史记录，否则很难从该组件中获取信息。

最简单的方法是在按下delete / backspace之前和之后比较输入字段的内容。

Answer 3

假设输入框的ID为“ input”。这是用最少的代码即可在输入框中找到最后一个字符的方法。

document.getElementById("input").onkeydown = function(evt) {
  const t = evt.target;
  if (evt.keyCode === 8) { // for backspace key
    console.log(t.value[t.selectionStart - 1]);
  } else if (evt.keyCode === 46) { // for delete key
    console.log(t.value[t.selectionStart]);
  }
};

<input id="input" />

Answer 4

你可以尝试使用插入位置的东西：

function getCaretPosition(control){
  var position = {};
  if (control.selectionStart && control.selectionEnd){
    position.start = control.selectionStart;
    position.end = control.selectionEnd;
  } else {
    var range = document.selection.createRange();
    position.start = (range.offsetLeft - 1) / 7;
    position.end = position.start + (range.text.length);
  }

  position.length = position.end - position.start;
  return position;
}

document.getElementById('test').onkeydown = function(e){
  var selection = getCaretPosition(this);
  var val = this.value;

  if((e.keyCode==8 || e.keyCode==46) && selection.start!==selection.end){
    alert(val.substr(selection.start, selection.length));
  } else if(e.keyCode==8){
    alert(val.substr(selection.start-1, 1));
  } else if(e.keyCode==46){
    alert(val.substr(selection.start, 1));
  }
}

在Chrome上测试6.有关示例

，请参阅 jsFiddle

获取已删除的角色

4 个答案: