obtener - Cómo hacer editable el contenido de un elemento con JavaScript(o jQuery)

obtener contenido de un div javascript

Question

¿Cómo lo haría para que el contenido de un elemento se pueda editar con JavaScript nativo (DOM) y / o jQuery?

Answer 1

Javascript:

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

Answer 2

Mira este ejemplo que he hecho: http://jsfiddle.net/K6W7J/

JS:

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

HTML:

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

Answer 3

O puedes usar this plugin que he estado sin problema en cualquier momento. Es realmente simple y fácil de usar.

Aquí un ejemplo:

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 4

Si utiliza jQuery para agregar el atributo al elemento, debería poder cambiar entre el modo de edición y el modo HTML "normal". El atributo contenteditable es compatible con todos los principales navegadores. Visite http://blog.whatwg.org/the-road-to-html-5-contenteditable para obtener más información.

Answer 5

Solución para activar / desactivar editables usando un controlador de clic:

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

DEMO