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

问题

How do I make undo/redo in textarea to react on 1 word at a time, word by word or character by character? Not to all at once.

Right now this function I have works but it reacts to all the words in the textarea at once and that is the wrong way to function in my case. I need it to react word by word and not all words at once, so that it works like a text editor. I am using Chrome, and I need it to work word by word or character by character for any web browser or at least for the major ones.

NOTE: Do not advice me to use editable div because in this case editable div I can not use with the other functions I have on the page. I need it for <textarea> and nothing else.

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>

回答1:

You can write a custom undo and redo, here's something to get you started. I simply save a state every time the user types '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>

回答2:

I'm trying this code.

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

来源：https://stackoverflow.com/questions/42882266/how-do-i-make-undo-redo-in-textarea-to-react-on-1-word-at-a-time-word-by-word

标签

javascript