1

Galera Como faço um script para que quando eu clicar no botão editar, automaticamente a minha div fique editável e apareça o botão salvar que ao ser clicado desaparecerá e a minha div voltara a ser não-editável?

<div class="texto" contenteditable="false">
    <p class="meu-texto" ><center>Meu texto Que sera editado</center></p>

</div>
<button class="editar">Editar</button>
<div class="hide" id="salvar-frase"><button class="btn-editar">Salvar</button></div>

` inserir a descrição da imagem aqui

3 Respostas 3

2

Basta usar document.querySelector (pode trocar por ids ao invés de classe também, mas isto é outra história):

var salvar = document.querySelector("#salvar-frase");
var editar = document.querySelector(".editar");
var texto = document.querySelector(".texto");

editar.onclick = function () {
    // Verifica se já esta editando
    if ((" " + salvar.className + " ").indexOf(" hide ") !== -1) {
        // habilita a edição
        texto.contentEditable = true;

        editar.classList.add("hide"); //Oculta o botão editar
        salvar.classList.remove("hide"); //mostra o botão salvar
    }
};

salvar.onclick = function () {
    // Verifica se já esta editando
    if ((" " + salvar.className + " ").indexOf(" hide ") === -1) {
        // desabilita a edição
        texto.contentEditable = false;

        editar.classList.remove("hide"); //mostra o botão editar
        salvar.classList.add("hide"); //Oculta o botão salvar
    }
};
.hide {
    display: none;
}
<div class="texto" contenteditable="false">
    <p class="meu-texto"><center>Meu texto Que sera editado</center></p>

</div>
<button class="editar">Editar</button>
<div class="hide" id="salvar-frase"><button class="btn-editar">Salvar</button></div>

Se desejar adicionar um foco automático ao div use .focus() e range (baseado nesta resposta):

var salvar = document.querySelector("#salvar-frase");
var editar = document.querySelector(".editar");
var texto = document.querySelector(".texto");

function setCursorEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

editar.onclick = function () {
    // Verifica se já esta editando
    if ((" " + salvar.className + " ").indexOf(" hide ") !== -1) {
        // habilita a edição
        texto.contentEditable = true;

        setCursorEnd(texto);

        editar.classList.add("hide"); //Oculta o botão editar
        salvar.classList.remove("hide"); //mostra o botão salvar
    }
};

salvar.onclick = function () {
    // Verifica se já esta editando
    if ((" " + salvar.className + " ").indexOf(" hide ") === -1) {
        // desabilita a edição
        texto.contentEditable = false;

        editar.classList.remove("hide"); //mostra o botão editar
        salvar.classList.add("hide"); //Oculta o botão salvar
    }
};
.hide {
    display: none;
}
<div class="texto" contenteditable="false">
    <p class="meu-texto"><center>Meu texto Que sera editado</center></p>

</div>
<button class="editar">Editar</button>
<div class="hide" id="salvar-frase"><button class="btn-editar">Salvar</button></div>

1

Utilizando jQuery, seria no seguinte exemplo:

$(function() {

  $("#btn-editar").on('click', function(e) {
    $('.texto').attr('contenteditable', true);
  });

  $(".editar").on('click', function(e) {
    $(".btn-editar").show();
    $('.texto').attr('contenteditable', true);
  });

  $(".btn-editar").on('click', function() {
    $(this).hide();
    $('.texto').attr('contenteditable', false);
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="texto" contenteditable="false">
  <p class="meu-texto">
    <center>Meu texto Que sera editado</center>
  </p>

</div>
<button class="editar">Editar</button>
<button style="display:none" class="btn-editar">Salvar</button>

1

Um jeito diferente seria:

document.querySelector('.editar').onclick = function() {
  let label = (this.innerHTML == 'Editar' ? 'Salvar' : 'Editar');
  let inEdit = (label == 'Salvar');
  
  document.querySelector('.texto').setAttribute('contenteditable', inEdit);
  this.innerHTML = label;
  
  document.querySelector('.texto').focus();
}
<div class="texto" contenteditable="false">
    <p class="meu-texto" ><center>Meu texto Que sera editado</center></p>

</div>
<button class="editar">Editar</button>

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 .