contentEditableプロパティ

HTML5にはcontentEditableという属性があります。この値がtrueだと、その要素はブラウザ内で編集可能となります。この値がfalseだと編集不可能になります。

javaScript

document.addEventListener('DOMContentLoaded',function(){
  // button要素にclickイベントのリスナーをセット
  var button = document.querySelector('#btn');
  button.addEventListener('click',function(){
    // p 要素
    var p = document.querySelector('#p');
    // 編集可能かどうかで条件分岐
    if(p.isContentEditable == false) {
      // 編集不可なら編集可能にする
      p.contentEditable = 'true';
      // フォーカスを当てる
      p.focus();
      // ボタンの表記を変更
      button.textContent = '編集不可にする';
    } else {
      // 編集可能なら編集不可にする
      p.contentEditable = 'false';
      // ボタンの表記を変更
      button.textContent = '編集可能にする';
    }
  },false);
},false);

HTML

<p><button id="btn">編集可能にする</button></p>
<p id="p">このテキストは編集することができます</p>

サンプル

このテキストは編集することができます