Para checar os caracteres inválidos você pode usar o .test()
com a expressão regular abaixo:
/[oiq]/i.test(written)
O conjunto [oiq]
verifica se na string existe as letras o
, i
ou q
, e a flag i
ignora se for maiúsculo ou minúsculo.
No input você usráusará 3 eventos, chamando a mesma função: onpaste
, onkeypress
e oninput
:
<input id="txtCh" name="Ch" onpaste="isValidChar(event)" onkeypress="isValidChar(event)" oninput="isValidChar()" style="text-transform: uppercase;" onCut="return false" maxlength="17"/>
Como os eventos onpaste
e onkeypress
são canceláveis você irá enviar para a função o evento com event
como parâmetro, e na função irá recebe-lo como argumento:
function isValidChar(e) {
↑
Se algum dos caracteres inválidos for inserido no input, você irá cancelar o evento onkeypress
ou onpaste
com preventDefault()
, fazendo com que nada possa ser inserido no campo até que o caractere inválido seja apagado.
O evento onpaste
é disparado quando o usuário tentar colar um texto no campo.
Veja funcionando:
function isValidChar(e) {
const alert = "INPUT CONTÉM LETRAS PROIBIDAS (I, O, Q)";
const res = document.querySelector("#resCh");
let written = document.querySelector("#txtCh").value;
if (/[oiq]/i.test(written)) {
document.getElementById("resCh").innerHTML = alert;
document.getElementById("resCh").style.display = "block";
if(e) e.preventDefault();
} else {
document.getElementById("resCh").style.display = "none";
}
}
<div class="col-xs-4 col-md-4">
<input id="txtCh" name="Ch" onpaste="isValidChar(event)" onkeypress="isValidChar(event)" oninput="isValidChar()" style="text-transform: uppercase;" onCut="return false" maxlength="17"/>
</div>
<div id="resCh" class="col-sm-4 col-md-4" style="color:red"></div>