JavaScript - DHTML / Efeitos

Texto editável com JavaScript

enviado por Rodrigo Araujo

Neste exemplo vamos fazer um título editável, ou seja, um título normal que, ao ser clicado se transforma em um campo de texto (INPUT) que ao perder o foco salva o novo valor e volta a ser um título novamente.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Texto editável com JavaScript</title>
  <style type="text/css">
    h1 {
      font:normal 2.4em/1.6 georgia, "times new roman", "bitstream vera serif", times, serif;
      color:#900;
    }
  </style>
  <script type="text/javascript">
    window.onload = function(){
      function editTitle(){
        var title = document.getElementsByTagName('h1')[0];
        var span = title.firstChild;
        span.onmouseover = function(){
          this.title = 'Clique para editar o texto';
          this.style.background = '#f5f5f5';
        }
        span.onmouseout = function(){
          this.title = '';
          this.style.background = '';
        }
        span.onclick = function(){
          var textoAtual = this.firstChild.nodeValue;
          var input = '<input type="text" name="1" value="'+textoAtual+'">';
          this.innerHTML = input;
          var field = this.firstChild;
          this.onclick = null;
          this.onmouseover = null;
          field.focus();
          field.select();
          field.onblur = function(){
            this.parentNode.innerHTML = this.value;
            editTitle();
          }
        }
      }
      editTitle();
    }
  </script>
</head>
<body>
  <h1><span>Edite este título</span></h1>
</body>
</html>

Versão impressa gerada em: quarta-feira, 25 de novembro de 2009