input somente em maiusculo sem caracteres especiais

thiagordepaiva · Julho 15, 2016

estou desenvolvendo um sistema onde o body da pagina e alterado pelo require do php, quero que tudo aquilo digitado pelo usuário seja sempre maiusculo e sem caractestes especiais, estou sempre os id's padrões e no javascript eu realizado as seguintes ações

document.getElementById("nome").addEventListener("input", function (event) {
	event.target.value = foldToASCII(event.target.value).toUpperCase();
});
document.getElementById("endereco").addEventListener("input", function (event) {
	event.target.value = foldToASCII(event.target.value).toUpperCase();
});
document.getElementById("complemento").addEventListener("input", function (event) {
	event.target.value = foldToASCII(event.target.value).toUpperCase();
});
document.getElementById("bairro").addEventListener("input", function (event) {
	event.target.value = foldToASCII(event.target.value).toUpperCase();
});
document.getElementById("cidade").addEventListener("input", function (event) {
	event.target.value = foldToASCII(event.target.value).toUpperCase();
});
document.getElementById("profissao").addEventListener("input", function (event) {
	event.target.value = foldToASCII(event.target.value).toUpperCase();
});
document.getElementById("nacionalidade").addEventListener("input", function (event) {
	event.target.value = foldToASCII(event.target.value).toUpperCase();
});
document.getElementById("naturalidade").addEventListener("input", function (event) {
	event.target.value = foldToASCII(event.target.value).toUpperCase();
});
document.getElementById("rg_orgao").addEventListener("input", function (event) {
	event.target.value = foldToASCII(event.target.value).toUpperCase();
});

os inputs são no padrão:

        <div class="input-field col s12 m4 l4">
            <input name="cidade" id="cidade" type="text" class="validate" style="border-color: #000000;" length="100" maxlength="100" required pattern="^[a-zA-Z0-9]+$">
            <label for="cidade" class="active" style="color: #000000;">Cidade</label>
        </div>

tem alguns cadastros que não tenho nenhum erro, mais alguns não da certo, como por exemplo e esse campo de cidade, que no cadastro de pessoa ele funciona perfeitamente bem, mais em outros cadastro não,

Gostaria de saber se estou fazendo alguma coisa errada, ou se tem alguma maneira mais simples de se fazer isso, pois da maneira que estou fazendo a cada novo campo que surgir tenho que alterar o javascript.

Desde de ja muito obrigado a todos!