如何让 <textarea> 中的 undo/redo 一次对 1 个单词、逐个单词或逐个字符做出反应？

Question

如何让文本区域中的 undo/redo 一次对 1 个词做出反应，逐词或逐字符？不是一下子全部。

我现在可以使用这个功能，但它会同时对文本区域中的所有单词做出反应，在我的情况下这是错误的运行方式。我需要它逐字反应，而不是一次反应所有单词，这样它就可以像文本编辑器一样工作。我正在使用 Chrome，我需要它在任何 Web 浏览器或至少主要浏览器中逐字逐句地工作。

注意： 不要建议我使用可编辑的 div 因为在这种情况下可编辑的 div 我不能与我拥有的其他功能一起使用这一页。 <textarea> 我只需要它。

JavaScript:

<script language="JavaScript">
function Undo() { document.execCommand("undo", false, null); }
function Redo() { document.execCommand("redo", false, null); }
</script>

HTML:

<input type="button" onmouseup="Undo();CopyTextDivText();" value=" &laquo;--&laquo; Undo " />
<input type="button" onmouseup="Redo();CopyTextDivText();" value=" Redo &raquo;--&raquo; " />
<textarea name="text" id="text" class="content" rows="34" cols="104" wrap="soft"></textarea>

Answer 1

您可以编写自定义撤消和重做，这里有一些内容可以帮助您入门。每次用户键入 'space'.

时，我只是保存一个状态

saveState = [];
var saveI = 0;

$('#inputRegion').on("keydown", function (event) {
 if (event.which == " ".charCodeAt(0)) {
  saveState.push($(this).val());
  saveI = saveState.length -1;
  debug();
 }
});

function triggerUndo () {
 if (saveI >= 0) {
  saveI--;
  $("#inputRegion").val(saveState[saveI]);
 }
 debug();
}

function triggerRedo () {
 if (saveI < saveState.length) {
  saveI++;
  $("#inputRegion").val(saveState[saveI]);
 }
 debug();
}

function debug() {
 return;
 //removed, used for debugging.
 console.log(saveI);
 console.log(saveState);
}

textarea {
  width:100%;
  height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="inputRegion"></textarea>
<br />
<button onclick="triggerUndo()">Undo</button>
<button onclick="triggerRedo()">Redo</button>

Answer 2

我正在尝试这段代码。

<style type="text/css">
  #knpmain div{
  display: inline-table;
  width: 280px;
 }
 .dnr {
  display: block;
 }
 button {
  width: 60px;
  height: 60px;
  margin: 4px;
 }
 #nu { width: 264px; }
 #lghtnr {
  position: relative;
  top: 20px;
  width: 200px;
  height: 80px;
  font-size: 2.0em;
 }
</style>

<h1>Number pad</h1>
<div id="knpmain">
 <div>
  <div>
    <textarea id="lghtnr" type="text"></textarea> 
  </div>
 </div>
 <div> 
  <div class="bnr">
    <button id="sj" value="7" onclick="up(this.value)">7</button>
    <button id="at" value="8" onclick="up(this.value)">8</button>
    <button id="ni" value="9" onclick="up(this.value)">9</button>
    <button id="cl" onclick="del()">C</button>
  </div>
  <div class="bnr">
    <button id="fy" value="4" onclick="up(this.value)">4</button>
    <button id="fe" value="5" onclick="up(this.value)">5</button>
    <button id="se" value="6" onclick="up(this.value)">6</button>
    <button id="ud"  onclick="rad()">&#8630;</button>
  </div>
  <div class="bnr">
    <button id="et" value="1" onclick="up(this.value)">1</button>
    <button id="tv" value="2" onclick="up(this.value)">2</button>
    <button id="tr" value="3" onclick="up(this.value)">3</button>
    <button id="rd" onclick="rdo()">&#8631;</button>
  </div>
  <div class="bnr">
    <button id="nu" value="0" onclick="up(this.value)">0</button>
  </div>
 </div>
</div>
<script>
var act = new Array(); var po=0;

function rad() {
      var inp = document.getElementById("lghtnr").innerHTML;
      var tmp = inp.substr(0, inp.length-1);
  document.getElementById("lghtnr").innerHTML = tmp;
  po--;
  console.log("inp:" + act + " StrL:" + inp.length + " Po:" + po);
}
function rdo() {
 if(po < act.length) {
  var inp = document.getElementById("lghtnr").innerHTML;
  document.getElementById("lghtnr").innerHTML = inp + act[po];
  po++;
 }
}
function up(v) {
  var inp = document.getElementById("lghtnr").innerHTML;
  var newinp = inp + v;
  document.getElementById("lghtnr").innerHTML = newinp;
  po++;
  act.push(v);
  console.log("inp:" + act + " StrL:" + newinp.length + " Po:" + po);
}

function del() {
  document.getElementById("lghtnr").innerHTML = "";
  po = 0; act = [];
}
</script>

如何让 <textarea> 中的 undo/redo 一次对 1 个单词、逐个单词或逐个字符做出反应？

How do I make undo/redo in <textarea> to react on 1 word at a time, word by word or character by character?

javascript

jquery

html

textarea

undo