Ao clicar no text vira input, ao perder foco vira text de novo...

[Regis Lacerda]

Fala galera, estou com um probleminha co javascript...

Eu tenho uma tabela onde será apresentado alguns dados vindos do banco de dados. Quando o usuário clicar sobre o nome ele deve mudar aquele texto para input text e quando a pessoa tirar o foco daquele campo ele deve voltar a ser texto com o valor digitado pelo usuário...

Iniciei dessa forma, porém, ele muda para input text, porém, não voltar para texto normal...

Segue o código

<td width="500">
  <div id="updateDinamico1" onclick=this.style.display="none";document.getElementById("updateDinamico2").style.display="";document.getElementById("inputText").focus() >
    Texto que pode ser alterado
  </div>
  <div id="updateDinamico2" style="display:none;" onblur=this.style.display="none";document.getElementById("updateDinamico1").style.display=""; >
    <input type="text" id="inputText" name="nome" />
  </div>
</td>

Não funciona passando o valor de block no style.display

Editado Maio 30, 2012 por Regis Lacerda

[fiote]

onclick=this.style.display="none";document.getElementById("updateDinamico2").style.display="";document.getElementById("inputText").focus()

Não faça isso, pelamordedeus, minha vista doeu aqui. Sério mesmo, rofl.

Seu código não funciona porque em nenhum momento o div pegou o focus, logo ele nunca ativará um onblur. O onBlur deve ficar no input.

<script>

function clickDiv(div) {
    div.style.display="none";
    document.getElementById("updateDinamico2").style.display = "inline";
    document.getElementById("inputText").focus();
}
function blurInput(input) {
    var div = input.parentNode;
    div.style.display = "none";
    document.getElementById("updateDinamico1").style.display = "inline";
}


</script>

<td width="500">
  <div id="updateDinamico1" onclick='clickDiv(this)'>
    Texto que pode ser alterado
  </div>
  <div id="updateDinamico2" style="display:none">
    <input type="text" id="inputText" name="nome" onBlur='blurInput(this)' />
  </div>
</td>

Editado Maio 30, 2012 por fiote

[Regis Lacerda]

Vlw parceiro...

Funcionou aqui...

Quanto ao problema do uso das funções, eu ainda estou estudando JS, então, não peguei essas manhas ainda...

Mas o exemplo que você passou estou seguindo a risca... rsrsrsrs

Obrigado e bom dia.

[fiote]

Poe um [Resolvido] no título do tópico ae =)

[Regis Lacerda]

Parceiro...

Só mais uma dúvida antes de finalizar....

Esse valor que eu coloco no inputText, como eu coloco ele para aparecer na primeira DIV???

Ou seja, ele perde o foco e o valor que está no input ficar aparecendo no texto...

Editado Maio 30, 2012 por Regis Lacerda

[fiote]

Dentro da função blurInput:

document.getElementById("updateDinamico1").innerHTML = input.value;

[Regis Lacerda]

Agora sim...

Problema resolvido...

Obrigado fiote!!!!