0

Tenho uma "div" que trás o dado de uma tabela "Mysql", como eu faço para que ao clicar nessa "div" o dado torna-se editável ? Mas sem ir para outra página.

<div id="nome_mysql">João</div>

Ao clicar em João, a "div" se tornaria um "input text", onde eu pudesse trocar o nome por outro, e após ter feito a troca, o "input text" retornaria a ser uma "div" normal ?

1 Resposta 1

1

Quando dizes "ao clicar nessa div o dado torna-se editável" o melhor é teres um input escondido que aparece quando clicas na div. Assim o valor que editares fica sempre na página, mesmo que o input esteja escondido.

Exemplo:

var div = document.getElementById('nome_mysql');
var input = document.querySelector('input[nome="nome_mysql"]');
console.log(div, input)

function toggleElements(show, hide) {
    show.style.display = 'block';
    hide.style.display = 'none';
    show.focus();
}

div.addEventListener('click', function() {
    input.value = this.innerText;
    toggleElements(input, this);
});
input.addEventListener('blur', function() {
    div.innerText = this.value;
    toggleElements(div, this);
});
input[nome="nome_mysql"] {
    display: none;
}
<div id="nome_mysql">João</div>
<input type="text" nome="nome_mysql" />

jsFiddle: https://jsfiddle.net/pwy4zyrb/1/

1
  • 2
    é exatamente o que preciso, que um dia eu possa recompensar esforço de pessoas como vc... Após a edição esse dado pode ser enviado ao banco? grato, grato e grato
    – MagicHat
    Commented 17/05/2016 às 3:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .