从内容可编辑的 div 中获取已删除的字符答案

【问题标题】：Get deleted character from content editable div从内容可编辑的 div 中获取已删除的字符
【发布时间】：2013-04-02 15:21:08
【问题描述】：

我正在使用content editable div，因为我想在文本区域中显示用户选择的表情符号。

我想知道character 是什么deleted 带有backspace 或delete 按钮。

jquery 或javascript 可以知道字符吗？

更新

这根本不是重复的，因为所有答案都是关于如何跟踪按下的键而不是关于被选中的字符。

【问题讨论】：

@Blazemonger 不知道这个能不能实现？
您可以尝试捕获退格按钮...http://stackoverflow.com/questions/4935655/how-to-trap-the-backspace-key-using-jquery
@Joseph 我只能跟踪按下的键。但是我如何获得被删除的字符
不知道有没有现成的解决方案。您可以将 keyup 之后的文本与 event.which==8 之前的文本进行比较，然后找到丢失的字符。不过，这并不漂亮:(
@dystroy 请删除我描述上方的重复链接，因为看到此问题的用户会得到错误的答案

标签： javascript jquery html character

【解决方案1】：

我没有干净的解决方案。但是，如果您按退格键，这个会显示已删除的字符：

var lastText = $('#editable').text();
$('#editable').keyup(function(event){
  if (event.which==8 || event.which==46) {
     var newText =  $(this).text();
    for (var i=0; i<lastText.length-1; i++) {
      if (lastText[i]!=newText[i]) {
       console.log("char '" +  lastText[i] + "' was removed at index "+i);
        lastText = newText;
        return;
      }
    }
  }
});

Demonstration

【讨论】：

这正是我认为必须解决问题的方式。
如果您单击演示，并在最后一个字符上按退格键，它会起作用 - 但如果您随后在文档的任何位置输入任何内容，下一个退格键将报告错误的字符。
@SLC 很抱歉，我无法重现您的问题。
只有在按下退格键时才设置lastText = newText。因此，如果您在文档开头键入“abc”，lastText 和 newText 不匹配。当您按退格键时，它会报告错误的字符。您需要为每个按键事件设置 lastText = newText。

【解决方案2】：

您可以使用preventDefault() 函数来做您想做的事。

这是一个使用 <textarea> 的示例，但它应该扩展到任何元素：

http://jsfiddle.net/4dThe/

$('#txtArea').keydown(function(e) { 

    if (e.which == 8)
    {
     var value =   $(this).val();
     var lastchar = value.substring(value.length - 1);

        alert("Last character is: " + lastchar);
        $(this).val(value.substring(0, value.length - 1));
        e.preventDefault();
    }

});

preventDefault() 方法会阻止退格操作，因此不会删除最后一个字符。然后您可以看到最后一个字符是什么，并自己执行退格操作。

您需要更改上面的示例以检测当前光标位置以删除正确的字符，但这是一个开始。

【讨论】：

如果删除的字符不是最后一个？
正如我在上一段中所说，我并没有做所有的工作；）
说真的...这里唯一的困难是找到 what 字符被删除了。
如果是这种情况，您确实需要完全按照我所做的那样做，但是用一些获取当前光标位置的代码替换我只取最后一个字符的部分。这是一个单独的问题。如果你想攻击我的答案，那就继续吧。您的答案涉及在整个文档中逐个字符地迭代。如果文本是一个大文档，它将冻结浏览器。然而，无论文本大小如何，我的解决方案都是即时的。此外，由于存在相当大的错误，您的解决方案将无法正常工作。