Ir para conteúdo
Fórum Script Brasil
  • 0

Titulo editavel


Desafio

Pergunta

Olá pessoal, gostaria de criar um titulo editavel, daqueles que são normais e quando clica aparece uma caixa de texto em input para digitar o texto e quando perde o foco, salva o que foi digitado no Input.

Eu até sei fazer isso, mas tem um problema, como eu faço para que fique salvo o que foi editado na Input, independentemente se eu editar e depois sair da pagina e volte denovo esteja a mesma coisa que eu editei na input? Teria como com um cookie? html? dhtml? javascript?

Tem esse codigo, mas como eu o modifico para que salve o que digitar na input mesmo se eu sair do site? (EMULEM NO BLOCO DE NOTAS COM EXTENSÃO .HTML

<!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>

Editado por kuroi
Adicionar tag CODE
Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,2k
×
×
  • Criar Novo...