JavaScriptの編集/キャンセルボタン

Question

私はユーザーがテキストを編集できるフォームを持っています。キャンセルボタンを押して削除すると、ユーザーはテキストを取得できます。

元のテキストを編集したユーザーのテキストを取得する方法と、編集前にフォームの元のテキストをキャンセルする場合はどうすればよいですか？

あなたが好き入力に data-original-textを追加することによって、これを行うために data-*属性を使用することができ

Answer 1

彼らは、複数の変更を行い、まだ変更で利用できる以前のテキストを持つことができるように、次のようなものが上に構築することができます。

// JavaScriptのソースコード

var orginalText = "Please Enter Some Text here"; 
var newTest = ""; 

$(document).ready(function() { 
    $("#target").change(function() { 
     newText = this.text; 
    }); 

    $(".cancel").on("click", function() { 
     $("#target").text(orginalText); 
    }); 
}); 

Answer 2

：

<input name='first_input' data-original-text='First input text' value="First input text"/> 

とデータ属性を取得し、値に割り当てますcancelボタンにクリックイベントを追加します。

$('form').on('click','#cancel',function(){ 
    $(this).closest('form').find('input').each(function(){ 
    $(this).val($(this).data('original-text')); 
    }) 
}) 

これが役に立ちます。

$('form').on('click','#cancel',function(){ 
 
    $(this).closest('form').find('input').each(function(){ 
 
    $(this).val($(this).data('original-text')); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input name='first_input' data-original-text='First input original text' value="First input original text"/> 
 
    <input name='second_input' data-original-text='Second input original text' value="Second input original text"/> 
 

 
    <button id='cancel'>Cancel</button> 
 
</form>