자바 스크립트에서 편집/취소 버튼

Question

사용자가 텍스트를 편집 할 수있는 양식이 있습니다. 사용자가 취소 버튼을 눌러 텍스트를 삭제하면 텍스트를 검색 할 수있게하려고합니다.

원래 텍스트를 편집하고 다시 편집하기 전에 양식의 원본 텍스트 취소를 누르면 어떻게 사용자 텍스트를 검색 할 수 있습니까?

Answer 1

뭔가가 여러 변경하고 여전히 변화에서 사용할 수있는 이전의 텍스트를 가질 수 있도록 기반으로 구축 할 수있다.

// 자바 스크립트 소스 코드

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

당신은 같은 입력에 data-original-text을 추가하여 data-*이 작업을 수행하는 속성을 사용할 수 있습니다

<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>