Javascript 如何在<；中撤消/重做；textarea>；一次对一个单词做出反应，是逐字还是逐字？

如何在textarea中执行撤消/重做操作，以便一次对一个单词作出反应，一个单词一个单词或一个字符一个字符？一次也不可能

现在这个函数可以工作，但它会同时对文本区域中的所有单词做出反应，这在我的例子中是错误的。我需要它一个字一个字地做出反应，而不是同时对所有的字做出反应，这样它就像一个文本编辑器一样工作。我使用的是Chrome，我需要它为任何web浏览器或至少主要浏览器逐字或逐字工作

注意：不要建议我使用editable div，因为在这种情况下，editable div无法与页面上的其他功能一起使用。我需要它来做

，别的什么都不需要

JavaScript:

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

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

函数Undo（）{document.execCommand（“Undo”，false，null）；}
函数Redo（）{document.execCommand（“Redo”，false，null）；}

HTML:

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

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

---

您可以编写自定义的撤消和重做，这里有一些东西可以帮助您开始。我只是在用户每次键入“space”时保存一个状态

saveState=[]；
var-saveI=0；
$（'#inputRegion'）。on（“keydown”，函数（事件）{
if（event.which==“”.charCodeAt（0））{
saveState.push（$（this.val（））；
saveI=saveState.length-1；
调试（）；
}
});
函数triggerUndo（）{
如果（saveI>=0）{
萨维--；
$（“#输入域”）.val（saveState[saveI]）；
}
调试（）；
}
函数triggerRedo（）{
if（saveI

textarea{
宽度：100%；
高度：100px；
}

撤消
重做

我正在尝试这个代码

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

#KNP主分区{
显示：内联表；
宽度：280px；
}
dnr先生{
显示：块；
}
钮扣{
宽度：60px；
高度：60px；
保证金：4倍；
}
#nu{宽度：264px；}
#lghtnr{
位置：相对位置；
顶部：20px；
宽度：200px；
高度：80px；
字号：2.0em；
}
数字键盘
7.
8.
9
C
4.
5.
6.
↶
1.
2.
3.
↷
0
var act=新数组（）；var-po=0；
函数rad（）{
var inp=document.getElementById（“lghtnr”）.innerHTML；
var tmp=inp.substr（0，inp.length-1）；
document.getElementById（“lghtnr”）.innerHTML=tmp；
波--；
控制台日志（“inp:+act+”StrL:+inp.length+“Po:+Po”）；
}
函数rdo（）{
如果（po<动作长度）{
var inp=document.getElementById（“lghtnr”）.innerHTML；
document.getElementById（“lghtnr”）.innerHTML=inp+act[po]；
po++；
}
}
功能启动（v）{
var inp=document.getElementById（“lghtnr”）.innerHTML；
var newinp=inp+v；
document.getElementById（“lghtnr”）.innerHTML=newinp；
po++；
推（v）；
console.log（“inp:+act+”StrL:+newinp.length+”Po:+Po”）；
}
函数del（）{
document.getElementById（“lghtnr”）.innerHTML=“”；
po=0；act=[]；
}

我已经试过了，但还是不行。你所说的节省搜索时间和使用“空间”的想法，对于撤销来说是一个非常好的主意，如果它奏效的话。此外，由于没有保存撤消，因此“重做”也无法工作。默认情况下，“撤消”一次处理所有文本，而不是逐字或逐字符@如果你的想法和你的代码确实有效，那么一定是代码中的某些细节可能是错误的。我会试图找出为什么它不起作用，但如果你能帮助我找到为什么它会很棒，因为你做了那些代码，你比我更了解它们@NFNNEIL请添加一些关于您答案的描述，否则它看起来像是

复制

和

粘贴

。请先看一下，如果我使用键盘，它不会有反应，但我必须使用页面中的按钮。如果我也用键盘写字，而不仅仅是用屏幕上的按钮来写字，我需要它来工作。