Replace "Apostrophe" key when typed in mobile input

Question

I am having a problem that I am not knowing the resolution when the system in question is accessed on mobile devices only.

I have a TEXTAREA field so that users can write their data and consequently send it to the database but there are some (rare) cases that some users inform the data they want and put the famous quote (') in their text. This caused me inconvenience, because when sending to the database there was a syntax error, because SQL understood that the Insert expression had been terminated by the special character.

So I was able to partially solve this problem by developing the following logic, which you can also see in the following link: 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>

The system must allow the user to type a MAXIMUM of 14 CHARACTERS PER LINE and a MAXIMUM of 5 LINES per textarea (until then without problems, it works perfectly on both mobile devices and computers). My problem occurs in function removeApostrofoText, which works ONLY on COMPUTERS, if I try to insert apostrophe in the textarea on a mobile device, this function is ignored, and does not replace the character:

    //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("'", "`"));
    }
}

Reinforcement that both the function sizeMaxime and sizeMaximoLines perform perfectly on any device, my only problem is being with the function removeApostrofoText that does not work on mobile phones, and I honestly do not understand the reason why "theoretically" the code is correct.

Thank you!

Answer 1

I managed to resolve gentlemen.

I changed the code by placing the CHANGE event and making global substitution in the textarea, and it was as follows: 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>

I then changed the JS code so that it could read all the text I’m sending in the textarea, and I had it interpreted if there is an apostrophe throughout the string. If it exists it replaces:

//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, "`"));
      }
}

Using the GLOBAL regex replace(/'/g, "`"), I was able to replace both on mobile devices and on Pcs