Detect value if changed

by Adi Jaya

HTML

<div id="editor" contenteditable="true">abcde</div>

<textarea readonly>abcde</textarea>

<p><button disabled id="save">Save</button></p>

<pre id="data-save" data-title="Data save:">abcde</pre>

CSS

[disabled] {
    color: red;
    opacity: 0.5;
}

#editor {
    padding: 15px;
    border: 1px solid silver;
    margin: 1em 0;
}

textarea {
  	box-sizing: border-box;
  	width: 100%;
  	height: 100px;
}

code {
    user-select: all;
}

pre {
    overflow: auto;
    background: beige;
    padding: 10px;
    white-space: normal;
}

pre::before {
	content: attr(data-title);
  	display: block;
	font-weight: bold;
  	color: red;
}

JavaScript

$("textarea").each(function(){
	var $attr =$( this ).attr( "data-value" );
	if(  !$attr ){
    	$( this ).attr( "data-value", $( this ).val() );
    }
});

$( document ).on("keyup","#editor", function(){
	var html =$( this ).html();
    $("textarea").val( html ).change();
});

$("textarea").on("change", function () {
    var $data = $(this).attr("data-value");
    var $val = $(this).val();
    var $save = $("#save");
    if ($val == $data) {
        $save.prop("disabled", true).html("same");
    } else {
        $save.prop("disabled", false).html("Save");
    }
});

//save
$("#save").on("click", function () {
    var textarea = $("textarea");
    textarea.attr("data-value", textarea.val());
    $("#data-save").text(textarea.val());
});