Display saved edit text in an editable button
here is my code. I have a text. and the button to edit text.i want to click the edit button and then display btn as the name save. to save the changes I have. what should I do? help friends
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../../../Editable/css/minified-std-acount.css">
<title>Untitled Document</title>
<script src="../../../eanjoman/js/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(e) {
$('button').click(function(){
var $div=$('div'),
isEditable=$div.is('.editable');
$('div').prop('contenteditable',!isEditable).toggleClass('editable')
})
});
</script>
<style>
.editable{ background:#EAEAEA}
</style>
</head>
<body>
<div>Some text</div><br><br><button>Toggle editable</button>
</body>
</html>
+3
user5113770
source
to share
1 answer
Well, you can just add one line code here:
$('button').click(function(){
var $div=$('div'),
isEditable=$div.is('.editable');
$('div').prop('contenteditable',!isEditable).toggleClass('editable')
$(this).text('Save'); //Add this
})
UPDATE
To switch it back, just test it text
like below:
$('button').click(function(){
var $div=$('div'),
isEditable=$div.is('.editable');
$('div').prop('contenteditable',!isEditable).toggleClass('editable')
if($(this).text()!="Save") //Add this condition
$(this).text('Save');
else
$(this).text('Toggle editable');
})
+1
source to share