Way to make backspace delete whole words at a time

问题

I have a text area:

<textarea type="input"  id="txtText">Hello+world-how*are+you</textarea>

I want a way for backspace to delete a whole word every time it is clicked using Javascript or Angular js. When I press backspace I want it to split by operators and delete from the end. The first backspaces in the above example would delete 'you' then 'are' then 'how' and so on. But if the mouse is on 'world' then it deletes 'world' first, then 'Hello'.

回答1:

Here is a solution than uses the data attribute to match for changes: jsFiddle

jQuery('#EditableDiv').keyup(function(e) {
  if (jQuery(e.target).text().length < jQuery(e.target).attr("data-value").length) {
    var data = jQuery(e.target).attr("data-value").split(" ");
    var text = jQuery(e.target).text().split(" ");
    for (var a = 0; a < data.length; a++) {
      if (text[a] != data[a]) {
        text.splice(a, 1);
        break;
      }
    }
    jQuery(e.target).text(text.join(" "));
  }
  jQuery(e.target).attr("data-value", jQuery(e.target).text());

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="EditableDiv" contenteditable="true" data-value="Hello, how are you" class="size">Hello, how are you</div>

来源：https://stackoverflow.com/questions/38261431/way-to-make-backspace-delete-whole-words-at-a-time