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

时间:2021-08-19 11:43:11

I am using a content editable div because i want to show emoticons selected by the user in the text area.

我正在使用内容可编辑div,因为我想在文本区域中显示用户选择的表情符号。

I want to know what character is deleted with backspace or delete button.

我想知道用退格键或删除键删除了哪个字符。

Is it possible to know the character with jquery or javascript?

是否可以用jquery或javascript知道字符?

UPDATE

UPDATE

This is not at all a duplicate, since all answer are about how to track a pressed key not about the delected character.

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

2 个解决方案

#1


3  

I don't have a clean solution. But this one shows you the removed char if you hit the backspace key :

我没有干净的解决方案。但是,如果您按下退格键,则会显示已删除的char:

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

示范

#2


0  

You can use the preventDefault() function to do what you want.

您可以使用preventDefault()函数来执行您想要的操作。

Here is an example using a <textarea> but it should extend to any element:

这是一个使用

http://jsfiddle.net/4dThe/

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

});

The preventDefault() method blocks the backspace operation, so the last character isn't deleted. You can then see what the last character is, and perform the backspace operation yourself.

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

You'll need to alter the above example to detect the current cursor position to delete the correct character, but it's a start.

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

#1


3  

I don't have a clean solution. But this one shows you the removed char if you hit the backspace key :

我没有干净的解决方案。但是,如果您按下退格键,则会显示已删除的char:

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

示范

#2


0  

You can use the preventDefault() function to do what you want.

您可以使用preventDefault()函数来执行您想要的操作。

Here is an example using a <textarea> but it should extend to any element:

这是一个使用

http://jsfiddle.net/4dThe/

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

});

The preventDefault() method blocks the backspace operation, so the last character isn't deleted. You can then see what the last character is, and perform the backspace operation yourself.

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

You'll need to alter the above example to detect the current cursor position to delete the correct character, but it's a start.

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