web-dev-qa-db-fra.com

Comment rendre le contenu d'un élément modifiable avec JavaScript (ou jQuery)

Comment pourrais-je faire en sorte que le contenu d'un élément puisse être rendu modifiable via JavaScript natif (DOM) et/ou jQuery?

javascriptjqueryhtmlhtml5contenteditable
22
user3117575

Solution pour activer/désactiver la modification à l'aide d'un gestionnaire de clics:

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

DEMO

28
charlietfl

Javascript:

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

Regardez cet exemple que j'ai fait: http://jsfiddle.net/K6W7J/

JS:

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

HTML:

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

Ou vous pouvez utiliser ce plugin que j'ai été sans problème à tout moment. il est vraiment simple et facile à utiliser.

Voici un exemple:

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

0
semirturgay

Si vous utilisez jQuery pour ajouter l'attribut à l'élément, vous devriez pouvoir basculer entre le mode d'édition et le mode HTML "normal". L'attribut contenteditable est pris en charge par tous les principaux navigateurs. Consultez http://blog.whatwg.org/the-road-to-html-5-contenteditable pour plus d'informations.

0
Jelle Kralt