テキストエリアに「もどす・進める」機能を簡単に設置する方法

undo redo 機能 jQuery

最近、未来に希望を持てた福山です。

検索の仕方がへたなのか、テキストエリアのUndo&RedoをJavaScriptで実装する方法を見つけることができませんでした。(あったけど、難解でコード長過ぎ)

しかし、少し考えたら数行で可能でした。シンプルはベストですね。

まずはお試しサンプル

文字を入力してボタンを押してみるといいです。

コード

HTML


<textarea rows="6" cols="30"></textarea>
<input type="button" id="undo" value="もどす" />
<input type="button" id="redo" value="進める" />

jQuery


// 使用する配列を定義する
var strUndo = [];
var strRedo = [];

// テキストエリアに入力されたら、そのつど内容をstrUndo配列に保存する
// jQuery 1.7以降を使用の方は bind の部分を on に変えてください。
jQuery('textarea').bind('keydown',function(){
     strUndo.push(jQuery(this).val());
});

// もどすボタンが押されたら
jQuery('#undo').click(function(){
     // strUndo配列の末尾を取り出してtempに格納
     var temp = strUndo.pop();
     // strRedo配列に、もどす前の内容を保存
     strRedo.push(jQuery('textarea').val());
     // テキストエリア全体をtempに書き換える
     jQuery('textarea').val(temp);
});

// 進めるボタンが押されたら
jQuery('#redo').click(function(){
     // strRedo配列の長さが0ではなかったら
     if(strRedo.length !=0){
       var temp = strRedo.pop();
       strUndo.push(jQuery('textarea').val());
       jQuery('textarea').val(temp);
     };
});

ショートカットctrl/cmd + zで戻したものは進めることができません。

「ここ、こうした方がいいんじゃない」などありましたらコメントをください!