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!