使退格键一次删除整个单词的方法 [英] Way to make backspace delete whole words at a time

问题描述

我有一个文本区域:

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

我想要一种让Backspace每次使用Javascript或Angular js单击时都删除整个单词的方法. 当我按退格键时，我希望它按运算符拆分并从末尾删除.上面示例中的第一个空格将删除"you"，"are"，"how"等. 但是，如果鼠标位于世界"上，则会先删除世界"，然后删除"Hello".

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'.

推荐答案

以下是使用data属性匹配更改的解决方案:

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>

这篇关于使退格键一次删除整个单词的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！