Javascript to remove accents and special characters does not work the same in all browsers ?

Question

I have the following Javascript:

function validaCaracteres(strToReplace) {
strSChar = "áàãâäéèêëíìîïóòõôöúùûüçÁÀÃÂÄÉÈÊËÍÌÎÏÓÒÕÖÔÚÙÛÜÇ";
strNoSChars = "aaaaaeeeeiiiiooooouuuucAAAAAEEEEIIIIOOOOOUUUUC";
var newStr = "";
for (var i = 0; i < strToReplace.length; i++) {
    if (strSChar.indexOf(strToReplace.charAt(i)) != -1) {
        newStr += strNoSChars.substr(strSChar.search(strToReplace.substr(i, 1)), 1);
    } else {
        newStr += strToReplace.substr(i, 1);
    }
}

return newStr.replace(/[^a-zA-Z 0-9]/g, '').toUpperCase();

}

Its purpose is to remove the special characters at typing time, special characters, accents and if the String is lowercase return it uppercase at typing time.

However, the following error occurs, it works different in certain browsers, such as IE, it does not allow positioning inside the String, sending to the last position of the String, does not allow the reissue of the Text.

I need that if the text is typed wrong have the option to re-edit it.

Is there any way to do that ?

I’m calling this function that way:

<h:inputText value="#{manBean.manVO.field}" 
                        onblur="this.value = validaCaracteres(this.value);"
                        onkeyup="this.value = validaCaracteres(this.value);"
                        onkeydown="this.value = validaCaracteres(this.value);"/>

Is there any other way to do this and can use the rewriting of the text ?

Thanks in advance !

Answer 1

Follows simple JS function to remove accents and special characters. Works in any browser:

function retira_acentos(str) {
	com_acento = "ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝŔÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿŕ";
	sem_acento = "AAAAAAACEEEEIIIIDNOOOOOOUUUUYRsBaaaaaaaceeeeiiiionoooooouuuuybyr";
	novastr="";
	for(i=0; i<str.length; i++) {
		troca=false;
		for (a=0; a<com_acento.length; a++) {
			if (str.substr(i,1)==com_acento.substr(a,1)) {
				novastr+=sem_acento.substr(a,1);
				troca=true;
				break;
			}
		}
		if (troca==false) {
			novastr+=str.substr(i,1);
		}
	}
	return novastr;
}		

var palavras="Último coração alumínio latência opções blablabla...";
alert (retira_acentos(palavras));

Answer 2

look, you can use script fold-to-ascii to remove special characters and accents.

Instead of using the event onblur, onkeyup and onkeydown, use only oninput, because it is triggered whenever the user inserts some text into the input.

var teste = document.getElementById("teste");
teste.addEventListener("input", function (event) {
	event.target.value = foldToASCII(event.target.value).toUpperCase();
});

<script src="https://rawgit.com/mplatt/fold-to-ascii/eae6030cc155a59fe7859666b4fb45171c67a17f/fold-to-ascii.js"></script>
<input id="teste" type="text" />

Answer 3

I finished using onkeypress

onkeypress="if(event.which < 65 || event.which > 93 ) if(event.which < 97 || event.which > 122 ) if(event.which < 48 || event.which > 57 ) if(event.which != 8) if(event.which != 32) if(event.which != 45) if(event.which != 95) return false;"/>

Thank you !