No quiero deshabilitar el cuadro de entrada, me gustaría eliminar el carácter incorrecto o permitir que el usuario lo elimine.
Hasta ahora, he intentado establecer la longitud máxima de la entrada en la longitud donde se ingresó el carácter incorrecto, pero aún pude escribir después de eso.
Aquí hay una muestra de la función en la que estoy trabajando:
function validateCharacterName() { var value = document.getElementById("characterName").value; var message = document.getElementById("characterNameMessage"); var button = document.getElementById("confirmButton") if (value.length <= 1) { message.innerText = "Name must be two or more characters." disableButton(button) } else { for (var counter = 0 ; counter < value.length; counter++) { var character = value.charAt(counter); if (isAlpha(character) && !isDigit(character)) { message.innerText = ""; enableButton(button); } else { message.innerText = "Character '" + character + "' is invalid."; disableButton(button); } } }}
La forma recomendada de garantizar que el texto ingresado solo contenga los caracteres esperados es usar el atributo de patrón . Esto funciona ligeramente diferente de lo que sugiere, pero estará más en línea con lo que el usuario esperaría, ya que es una forma muy común de hacerlo. Aquí puedes ver esto en acción .
Para ser específicos, aquí hay un ejemplo de cómo evitar la letra "a":
<input type="text" pattern="[^a]*" title="Please avoid the letter 'a'"> El atributo patrón utiliza expresiones regulares . Esto necesita algo de tiempo para acostumbrarse, pero es bastante poderoso. En este caso el ^ insider el [] significa "no". La a significa "a" y el * significa permite cualquier número de apariciones de lo anterior. En resumen, esto significa permitir cualquier número de cualquier carácter que no sea una "a".
Es posible que desee utilizar un enfoque de lista blanca en lugar de un enfoque de lista negra. Por ejemplo, para permitir cualquier letra latina que pueda usar:
<input type="text" pattern="[a-zA-Z]*" title="Please use letters only">