在可编辑按钮中显示保存底部编辑文本

Question

这是我的代码。我有一个文本。和一个用于编辑 text.i 的按钮想要单击编辑按钮然后显示 btn 作为名称保存。为了保存我的零钱。我应该怎么办？帮助我朋友

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

Answer 1

那么你可以在这里添加一行代码:

DEMO

$('button').click(function(){
    var $div=$('div'),
     isEditable=$div.is('.editable');
     $('div').prop('contenteditable',!isEditable).toggleClass('editable')
     $(this).text('Save'); //Add this
})

更新

UPDATED DEMO

要将其切换回来，只需检查其 text，如下所示：

$('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');
})

在可编辑按钮中显示保存底部编辑文本

display a save bottom edit text in editable button

html

javascript

jquery

contenteditable