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

display a save bottom edit text in editable button

本文关键字：编辑 保存 底部 显示 文本 按钮 编辑按      更新时间：2023-09-26

这是我的代码。我有一条短信。还有一个编辑文本的按钮。我想点击编辑按钮，然后显示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>

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

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

<

更新演示/strong>

要将其切换回来，只需检查其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');
})
相关文章：