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

标签 javascript jquery html contenteditable

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

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

最佳答案

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

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

关于javascript - 在可编辑按钮中显示保存底部编辑文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31422945/

相关文章:

javascript - 放大弹出窗口 : open by clicking on something other than the image

javascript - 如何将键盘快捷键绑定(bind)到 html 音频元素的播放和暂停控件

php - 如何在水平方向上创建多级 ul li

javascript - React 不会访问嵌套状态

javascript - 在 coffeescript、javascript 中使用正则表达式进行回调

jquery 弹跳效果破坏了列表的内联对齐

javascript - 文本不会对齐或移动

jquery - 我可以使用 jQuery 来定位 HTML 中的文本字符串吗?

html - Firefox 中的字形图标是像素化的

iphone - HTML5 视频在 iPad 上不显示