javascript - display a save bottom edit text in editable button -


here code. have text. , button editing text.i want click edit button time display btn name save . saving change have. should do? me 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>

well can add 1 line code here:

demo

$('button').click(function(){     var $div=$('div'),      iseditable=$div.is('.editable');      $('div').prop('contenteditable',!iseditable).toggleclass('editable')      $(this).text('save'); //add })

update

updated demo

to toggle check text below:

$('button').click(function(){     var $div=$('div'),      iseditable=$div.is('.editable');     $('div').prop('contenteditable',!iseditable).toggleclass('editable')     if($(this).text()!="save") //add condition         $(this).text('save');     else         $(this).text('toggle editable'); })

-

Comments

Post a Comment