Tengo un campo de entrada y quiero darle a este campo una validación que acepte solo números hexadecimales. Por lo que debería aceptar números del 0 al 9 y letras de la A a la F.
Aquí está mi campo de entrada:
<input type="text" class="form-control" tabindex="9" maxlength="2">¿Cómo crees que puedo lograr esto?
Puede usar la expresión regular para su problema. Escribo un ejemplo simple para su entrada.
<input type="text" id="hex_code" name="hex_code" pattern="#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?" title="in valid hex code"><br><br>otra opción es el color de tipo de entrada como el comentario de @groov_guy, pero debe convertir los valores rgb a hexadecimales como esta publicación, por lo que debe establecer el valor predeterminado con formato hexadecimal y luego, cuando el cliente cambie de color, puede obtener un nuevo código hexadecimal. un código básico como se muestra a continuación
<input type="color" onchange="printColor(event)" value="#ff0000"> function printColor(ev) { const color = ev.target.value; console.log(color) // you can get hex value }https://css-tricks.com/color-inputs-a-deep-dive-into-cross-browser-differences/
Puede agregar el atributo de patrón a la entrada. Esto no evitará que el usuario escriba información no válida, pero al enviarla se mostrará un mensaje. Además, puede agregar algunos estilos para mostrar que algo está mal antes de enviarlo.
<input type="text" class="form-control" tabindex="9" maxlength="2" pattern="[0-9a-fA-F]+"> <style> input:invalid { border: red solid 3px; } </style>Prueba esto
<input type="text" class="form-control" onchange="validate($event)" tabindex="9" maxlength="2"> Y en tu .js
validate(event) { let regEx = "^[-+]?[0-9A-Fa-f]+\.?[0-9A-Fa-f]*?$"; let isHex = regEx.match(event.target.value); // Do things with isHex Boolean }EDITAR : si necesita evitar, puede hacer algo como esto
var input = document.getElementById('input'); input.addEventListener('keyup', (event) => { let regEx = /^[0-9a-fA-F]+$/; let isHex = regEx.test(event.target.value.toString()); if(!isHex) { input.value = input.value.slice(0, -1); } }) <input type="text" class="form-control" id="input" tabindex="9" maxlength="2">