undo / redo кнопки
 

Здравствуйте.
На сайте есть большая форма. Пользователь что-то вводит, что-то заполняет, но данные пока не отправляет. Как лучше реализовать кнопки undo / redo? Можете посоветовать уже готовые библиотеки?

Что они должны делать?

Близкое по аналогии с MS Word. Пользователь ввел тест в поле формы, нажал undo и текст исчез (или исчез последний сомвол), пользователь выбрал какой-то checkbox, нажал undo и checkbox стал не выбранным.

michael_km, тогда придется запоминать и хранить всю "историю изменений", а по событию обрабатывать это и делать соответствующие изменения данных...

Ну наверно по Undo сохранять в Localstorage, в наращиваемый массив/стек(наверно в одном ключе)

набросок на коленке за минутку.
приерно в этом ключе надо воять.


Собственно код+тест.

var store={
     //хранилище действий, сюда можно запихивать обьекты, функции, всё что душе угодно
     store:[],
     //позиция курсора
     count:0,
     //позицию курсора выше которой нельзя сдвинуться в redo
     maxcount:0,

     //сохраняем действие пользователя
     save:function(param){        
         alert('пользователь совершил действие: '+param);
       	 this.count++;
         this.maxcount=this.count;         
         this.store[this.count]=param;
     },
    
     // откат (false - значит что откатывать некуда)
     undo:function(){
       if (this.count>1){
         this.count--;
         return this.store[this.count];          
       } else return false;
     },

    // восстановление (false - значит что восстанавливать нечего, верхняя граница определяется по this.maxcount)
     redo:function(){
       if(this.count<this.maxcount){
         this.count++;
         return this.store[this.count];          
       }
       else return false;
     }
}

alert("false - значит что undo/redo не даст эфекта, в случае false нечего делать ненадо. В примере специально используются лишние undo и redo, для правдоподобной имитации пользователя" );
store.save('действие1');
store.save('действие2');
store.save('действие3');
store.save('действие4');      
      
alert('откат на '+store.undo());      
alert('откат на '+store.undo()); 
alert('откат на '+store.undo()); 
alert('откат на '+store.undo()); 
      
alert('востановлено '+store.redo());      
alert('востановлено '+store.redo()); 
alert('востановлено '+store.redo());      
alert('востановлено '+store.redo()); 
alert('востановлено '+store.redo());      
alert('востановлено '+store.redo()); 
      
      
alert('откат на '+store.undo());      
alert('откат на '+store.undo());      

store.save('2-1 действие');      
store.save('2-2 действие');                  
store.save('2-3 действие');      
store.save('2-4 действие');            
alert('откат на '+store.undo()); 
alert('откат на '+store.undo()); 
      
alert('востановлено '+store.redo());      
alert('востановлено '+store.redo());

в примере абстрактные данные- просто с строка с текстом,
ну а в вашем случае это быдет сериализованная форма.
ну или value изменённого поля, и ссылка на это поле
тогда value будет восстанавливаться для конкретного поля
Это будет выглядеть примерно так

$('input').change(function(){
    store.save({
        target:$(this),
        val:$(this).val()
    })
})

$('#undo').click(function(){
    var d=store.undo();
    d.target.val(d.val)
})

Спасибо за наводку.