ダブルクリックするとinput要素になるp要素を作る

javascript

仕組みとしては、ダブルクリックイベントを取ってreplaceChildで置き換えているだけ。
input要素内でエンターキーが押されるか、input要素からフォーカスが外れるとp要素に戻る。

HTML

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ダブルクリックするとpがinputに変化します</title>
    <script type="text/javascript" src="p2input.js"></script>
  <body>
    <h1>ダブルクリックするとpがinputに変化します</h1>
    <p>ああああああああああああ</p>
  </body>
</html>

p2input.js

window.onload = function() {
  document.querySelector("p").addEventListener("dblclick", function() {
    var parent = this.parentNode;
    var p = this;
    var input = document.createElement("input");
    
    input.setAttribute("type", "text");
    input.value = p.innerText;
    
    // エンターキーが押されるかフォーカスが外れるかするとp要素に戻すようにしておく
    // エンターキーが押された場合
    input.addEventListener("keydown", function(e) {
      if(e.keyCode === 13) {
        p.innerText = this.value;
        parent.replaceChild(p, this);
      }
    });
    
    // フォーカスが外れた場合
    input.addEventListener("blur", function() {
      p.innerText = this.value;
      parent.replaceChild(p, this);
    });
    
    parent.replaceChild(input, p);
    
    input.focus();
  });
};