Question

我想知道如何才能使<button>的内容可编辑？我已经尝试制作<div> contenteditable = True，但我似乎无法解决这个问题。有人可以告诉我该怎么做吗？

编辑：

$('#button')
            .click(function(eventClick, posX, posY){
                posX = typeof posX !== 'undefined' ? posX : null;
                posY = typeof posY !== 'undefined' ? posY : null;

                var htmlData='<div id="btn'+$.count+'" class="data-page="' + $.page + '"';

                htmlData += '><button id="editable'+$.count+'" style="width:100%; height:100%">move me, resize me</button></div>';

                $('.demo').append(htmlData);
                $('#btn2').resizable({grid: 10})
                .draggable({cancel:false, grid: [ 10,10 ] });
                $('#editable2').click(function(){
                    if ( $(this).is('.ui-draggable-dragging') ) {
                    return;
                    }
                    $(this).draggable( "option", "disabled", true);
                    $(this).attr('contenteditable','true');
                })
                .blur(function(){
                    $(this).draggable( 'option', 'disabled', false);
                    $(this).attr('contenteditable','false');
                })
        });

因此，当点击一个按钮时，它会创建这个可编辑的按钮，但它不起作用。

Answer 1

你应该这样使用：

<button contenteditable>button</button>

不：<button contenteditable=true>button</button>

注意：此支持仅涉及非常基本的编辑功能，实现在如何编辑某些元素方面存在很大差异。 source: can I use

Answer 2

尝试

$(this).attr('contentEditable', true); // with capital 'E' ; no quotes around true

或

$(this).get(0).contentEditable = true;

Answer 3

就是这样。

<button contenteditable>Hello</button>

如何使按钮的内容可编辑？

3 个答案: