-1

estou com um problema que não estou sabendo a resolução quando o sistema em questão é acessado em dispositivos móveis apenas.

Possuo um campo TEXTAREA para que os usuários possam escrever seus dados e consequentemente enviar ao banco de dados porém, existem alguns casos (raros) que alguns usuários informam os dados que desejam e colocam o famoso apóstrofo (') em seu texto. Isso me gerava transtornos, pois ao enviar para o banco de dados ocorria um erro de sintaxe, pois o SQL entendia que a expressão do insert havia sido encerrado pelo caracter especial.

Sendo assim, consegui resolver parcialmente este problema desenvolvendo a seguinte lógica, que vocês também podem ver no link a seguir: https://jsfiddle.net/9snvtp07/3/

//Crio via HTML um textarea comum
 <textarea name="option[733]" rows="5" placeholder="(Máx. 5 Linhas e 14 CARACTERES por Linha)" id="input-option733" class="form-control"></textarea>

O sistema deve permitir que o usuário digite no MÁXIMO 14 CARACTERES POR LINHA e no MÁXIMO 5 LINHAS por cada textarea (até ai sem problemas, funciona perfeitamente tanto em dispositivos móveis quanto em computadores). Meu problema ocorre na função retiraApostrofoTexto, o qual funciona APENAS em COMPUTADORES, se eu tento inserir apóstrofo no textarea em um dispositivo móvel, essa função é ignorada, e não faz a substituição do caracter:

    //Corrige bug no banco de dados quando informado dados por apostrofo 
$(document).ready(function(){
    //Input do textarea chamando funções
    $('#input-option733').on('keyup', retiraApostrofoTexto);
    $('#input-option733').on('input focus keydown keyup', tamanhoMaximoCaracteres);     
        $('#input-option733').on('keypress', tamanhoMaximoLinhas);

});

function tamanhoMaximoCaracteres(){
    var maxLength = 14;
    var text = $(this).val();
    var lines = text.split(/(\r\n|\n|\r)/gm); 
    for (var i = 0; i < lines.length; i++) {
      if (lines[i].length > maxLength) {
        lines[i] = lines[i].substring(0, maxLength);
      }
    }
    $(this).val(lines.join(''));
}

function tamanhoMaximoLinhas(event){
    var textarea = $(this),
        text = textarea.val(),
        numberOfLines = (text.match(/\n/g) || []).length + 1,
        maxRows = parseInt(textarea.attr('rows'));

    if (event.which === 13 && numberOfLines === 5 ) {
      return false;
    }
}

function retiraApostrofoTexto(e){
    if(e.key === "'"){
        $(e.target).val($(e.target).val().replace("'", "`"));
    }
}

Reforço que tanto a função tamanhoMaximoCaracteres e tamanhoMaximoLinhas executam perfeitamente em qualquer dispositivo, meu unico problema está sendo com a função retiraApostrofoTexto que não funciona em celulares, e honestamente não estou entendendo o motivo pois "teoricamente" o código está correto.

Obrigado!

1 Resposta 1

0

Consegui resolver senhores.

Mudei o código colocando o evento CHANGE e fazendo substuição global no textarea, e ficou da seguinte forma: https://jsfiddle.net/q5yg9sb6/

<!-- MESCALDA -->
<textarea name="option[733]" rows="5" placeholder="(Máx. 5 Linhas e 14 CARACTERES por Linha)" id="input-option733" class="form-control"></textarea>

Em seguida, alterei o código JS, para que ele pudesse ler todo o texto que estou enviando no textarea, e mandei interpretar se existe apostrofo por toda a string. Caso exista ele substitui:

//Corrige bug no banco de dados quando informado dados por apostrofo 
$(document).ready(function(){
    //Input do textarea chamando funções
    $('#input-option733').on('change', retiraApostrofoTexto);

});

function retiraApostrofoTexto(e){
            if($(e.target).val().includes("'")){
          const phrase = $(e.target).val();
            $(e.target).val(phrase.replace(/'/g, "`"));
      }
}

Utilizando do regex GLOBAL replace(/'/g, "`"), pude realizar a substituição tanto em dispositivos móveis quanto em PCs

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 .