如何在< textarea>中进行撤消/重做一次对一个单词，一个单词一个单词或一个字符一个字符地反应? [英] How do I make undo/redo in <textarea> 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.

现在我有这个功能了，但是它会立即对文本区域中的所有单词做出反应，这对我来说是错误的功能.我需要它逐个单词地响应，而不是一次全部响应，以便它像文本编辑器一样工作.我使用的是Chrome，我需要它能够针对任何网络浏览器或至少对于主要的浏览器逐字逐字符地工作.

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.

注意::不要建议我使用可编辑div，因为在这种情况下，我无法与页面上的其他功能一起使用.我只需要<textarea>就可以了.

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>

推荐答案

您可以编写自定义的撤消和重做，以下是一些入门知识.每当用户键入空格"时，我只是保存一个状态.

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>

这篇关于如何在< textarea>中进行撤消/重做一次对一个单词，一个单词一个单词或一个字符一个字符地反应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！