How to prevent deletion of an html snippet?

-1

Good morning People, I have the code

<Sua IMAGEM ESTÁ AQUI NÃO APAGUE ESTE CODIGO> 

VÁRIOS CODIGOS HTML AQUI DENTRO.

</Sua IMAGEM ESTÁ AQUI NÃO APAGUE ESTE CODIGO> 

What do I want to do? I want to know if it is possible for me to make it impossible for what I have with the <Sua IMAGEM ESTÁ AQUI NÃO APAGUE ESTE CODIGO> e fechando </Sua IMAGEM ESTÁ AQUI NÃO APAGUE ESTE CODIGO> tag to make it impossible for the user to delete this snippet with these tags, that is, it will backspace and the text will return. Or is backspace inactive in these snippets possible?

    
asked by anonymous 07.01.2018 / 00:30

2 answers

1

You can add this code to a hidden element, and then check for each modification if it is in the textarea.

/* Captura o valor dos dados que NÃO podem ser apagados */
var elementoOculto = document.querySelector("#elemento-oculto");

/* Captura o valor da caixa de edição */
var elementoNormal = document.querySelector("#elemento-normal");

/* Adiciona evento para detectar a tecla pressionada antes da ação dela. */
elementoNormal.addEventListener("keydown", function(e) {
  if (e.keyCode === 8 || e.keyCode === 46) {
  
    /* Captura onde o cursor está localizado no textarea "normal" */
    let selectionStart = this.selectionStart;
    let selectionEnd = this.selectionEnd;
    
    /**
     * Subtrai a posição de início para n-1, dessa forma será
     * possível capturar a letra anterior a posição do cursor
     */
    if (selectionStart === selectionEnd) {
      selectionStart--;
    }
    
    /* Caso o usuário aperte a tecla Delete, captura a letra seguinte. */
    if (e.keyCode === 46 && (selectionEnd - selectionStart) === 1) {
      selectionStart++;
      selectionEnd++;
    }
    
    /* Captura a letra ou seleção de letras deletadas. */
    let newValue = this.value.slice(0, selectionStart) + this.value.slice(selectionEnd);
    
    /* Verifica se o novo valor possui o mesmo código da textarea elemento oculto */
    if ( newValue.indexOf(elementoOculto.value) === -1 ) {
    
      /* Caso não possua o mesmo valor, impede a ação do usuário. */
      e.preventDefault();
      return false;
    }
  }
})
#elemento-oculto {
  display: none;
  visibility: 0;
  opacity: 0;
}
<!-- Adicione no valor desse elemento, O CÓDIGO QUE NÃO PODERÁ SER DELETADO. -->
<textarea id="elemento-oculto"><Sua IMAGEM ESTÁ AQUI NÃO APAGUE ESTE CODIGO> 

VÁRIOS CODIGOS HTML AQUI DENTRO.

</Sua IMAGEM ESTÁ AQUI NÃO APAGUE ESTE CODIGO></textarea>




<!-- Esse outro elemento, é onde o usuário poderá deletar os dados. -->
<textarea id="elemento-normal" rows="10" cols="60">
Blá blá blá blá
<Sua IMAGEM ESTÁ AQUI NÃO APAGUE ESTE CODIGO> 

VÁRIOS CODIGOS HTML AQUI DENTRO.

</Sua IMAGEM ESTÁ AQUI NÃO APAGUE ESTE CODIGO>

Blá blá blá blá

</textarea>
    
07.01.2018 / 02:26
-1

This should work for you

$(document).keydown(function(e) {
   var elid = $(document.activeElement).hasClass('textInput');
   if (e.keyCode === 8 && !elid) {
    return false;
   };
});

e.keyCode is the identification of the backspace key on the keyboard. Need to adapt to your form

    
07.01.2018 / 00:39