Ocultar carácter no compatible en el cuadro de texto.
Oculta el texto no compatible de la caja de texto si la fuente no es compatible.
He añadido una caja de texto y aplicado una fuente, y he añadido algunos caracteres de texto, números y caracteres especiales. Los caracteres de la a a la z se muestran perfectamente, pero los números y los caracteres especiales se muestran con las fuentes admitidas por el navegador de forma predeterminada. Adjunto una captura de pantalla del mismo.
1) Representación de fuente original
davy.ai
Para ocultar texto no compatible en un cuadro de texto si la fuente no está soportada, puedes utilizar una combinación de verificación de fuente y reemplazo utilizando JavaScript. Aquí te mostramos cómo puedes lograrlo:
Esta función toma el nombre de la fuente como entrada y devuelve
true
si la fuente es soportada yfalse
en caso contrario.Una vez que hayas determinado que una fuente no está soportada, puedes reemplazar los caracteres no compatibles por aquellos que sí lo están utilizando expresiones regulares. Aquí tienes un ejemplo:
En este ejemplo, utilizamos una expresión regular para buscar cualquier caracter fuera del rango ASCII (es decir, caracteres que no son soportados por la fuente). Reemplazamos estos caracteres por una cadena vacía, eliminándolos efectivamente del texto.
Por último, puedes actualizar el cuadro de texto con el texto compatible. Aquí tienes el código para esto:
En este ejemplo, estamos verificando si nuestra fuente deseada (‘MiFuente’) es soportada. Si no lo está, obtenemos el valor actual del cuadro de texto, reemplazamos cualquier caracter no compatible por una cadena vacía y actualizamos el cuadro de texto con el texto compatible.
Utilizando este enfoque, puedes ocultar texto no compatible de un cuadro de texto si la fuente no está soportada, brindando una mejor experiencia de usuario para tus usuarios.