<textarea>で元に戻す/やり直しを行うには、一度に1ワード、単語ごとに、または文字ごとに反応させるにはどうすればよいですか？

Question

一度に1単語、単語ごとにまたは文字ごとに反応するようにテキストエリアで元に戻す/やり直しを行うにはどうすればよいですか？一度にすべてにはない。

私はこの機能を使用していますが、テキストエリア内のすべての単語にすぐに反応します。これは私の場合には機能しない方法です。私はそれをテキストエディタのように動作させるために、一言で言葉ではなく一言で反応する必要があります。私はChromeを使用しています。ウェブブラウザや主要なブラウザでは、単語単位で、または文字単位で動作する必要があります。

注：編集可能な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

カスタムを書くことができますが、元に戻すとやり直し、ここであなたが始めるために何かがあります。ユーザーが「スペース」を入力するたびに状態を保存するだけです。

saveState = []; 
 
var saveI = 0; 
 

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

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

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

 
function debug() { 
 
\t return; 
 
\t //removed, used for debugging. 
 
\t console.log(saveI); 
 
\t 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>