• 0
Sign in to follow this  
Regis Lacerda

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

Question

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

Edited by Regis Lacerda

Share this post


Link to post
Share on other sites

6 answers to this question

Recommended Posts

  • 0

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>

Edited by fiote

Share this post


Link to post
Share on other sites
  • 0

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.

Share this post


Link to post
Share on other sites
  • 0

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

Edited by Regis Lacerda

Share this post


Link to post
Share on other sites
  • 0

Dentro da função blurInput:

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this