Question

如何通过本机JavaScript（DOM）和/或jQuery使元素的内容可编辑？

Answer 1

使用点击处理程序切换可编辑开/关的解决方案：

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

的 DEMO

Answer 2

使用Javascript：

document.getElementById('IdOfElement').contentEditable='true';

Answer 3

看看我做过的这个例子： http://jsfiddle.net/K6W7J/

JS：

$('button').click(function(){
    $('div').attr('contenteditable','true');
})

HTML：

<button>CLICK</button>
<div>YOUR CONTENT</div>

Answer 4

或者您可以使用this 插件，我一直没有问题。它真的很简单而且易于使用。

这是一个例子：

<强> HTML

 <div style="margin: 150px">
    <a href="#" id="username">awesome</a>
</div>

<强> JS

 $('#username').editable({
        type: 'text',
        url: '/post',    
        pk: 1,    
        title: 'Enter username',
        ajaxOptions: {
            type: 'put'
        }        
    });

DEMO

Answer 5

如果使用jQuery将属性添加到元素，则应该能够在编辑模式和“普通”HTML模式之间切换。所有主流浏览器都支持contenteditable属性。查看http://blog.whatwg.org/the-road-to-html-5-contenteditable了解详情。

Answer 6

我们要做的就是在几乎所有HTML元素上设置 contenteditable 属性，使其可编辑。

这是一个简单的示例，它创建一个元素，用户可以对其内容进行编辑。

<div contenteditable="true">
  This text can be edited by the user.
</div>

如何使用JavaScript（或jQuery）编辑元素的内容

6 个答案: