web-dev-qa-db-ja.com

JavaScript（またはjQuery）を使用して要素のコンテンツを編集可能にする方法

要素のコンテンツをネイティブJavaScript（DOM）やjQueryを介して編集可能にするにはどうすればよいですか？

javascriptjqueryhtmlhtml5contenteditable
22
user3117575

クリックハンドラーを使用して編集可能なオン/オフを切り替えるソリューション：

$('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

私が作ったこの例を見てください： http://jsfiddle.net/K6W7J/

JS：

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

HTML：

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

または、 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

0
semirturgay

JQueryを使用して属性を要素に追加すると、編集モードと「通常の」HTMLモードを切り替えることができるはずです。 contenteditable属性は、すべての主要なブラウザーでサポートされています。詳細については、 http://blog.whatwg.org/the-road-to-html-5-contenteditable をご覧ください。

0
Jelle Kralt