Comment faire d'un élément de contenu modifiable avec JavaScript (jQuery)

Comment pourrais-je faire de sorte que le contenu d'un élément peut être fait modifiable par le biais de JavaScript natif (DOM) et/ou jQuery?

InformationsquelleAutor | 2013-12-29
  1. 27

    Solution pour basculer modifiable on/off à l'aide d'un gestionnaire de clic:

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

    DÉMO

    • c'est vraiment pas difficile de le convertir. essayez-le et si vous avez des problèmes pour créer une autre question
    InformationsquelleAutor charlietfl
  2. 27

    Javascript:

    document.getElementById('IdOfElement').contentEditable='true';
    • Merci pour l'aide de JavaScript.
    InformationsquelleAutor nicael
  3. 12

    Oeil à 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>
    InformationsquelleAutor vlad_alek
  4. 0

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

    • lien d'origine est toujours là, mais tous les liens qui y sont aujourd'hui disparu. 🙁
    InformationsquelleAutor Jelle Kralt
  5. 0

    Ou vous pouvez utiliser cette plugin que j'ai été avec aucun 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'
        }        
    });

    DÉMO

    InformationsquelleAutor semirturgay