Cómo agregar dos colores separados para número y caracteres en un cuadro de texto usando JavaScript

Es un poco doloroso, pero puedes hacerlo.

Aquí hay un ejemplo de jsfiddle de cómo funciona.

http://jsfiddle.net/kenmazaika/L…

Tratar Field2 como un cuadro de texto. Desea crear más CSS para que se parezca más a un cuadro de texto. Observe cómo si escribe el número “1” es rojo, pero todo lo demás es negro.

Básicamente, lo que sucede es que hay un campo de entrada que no es visible para el usuario. Cuando hace clic en la vista de entrada, que es un div, obtiene el foco del cuadro de texto oculto. Cuando el cuadro de texto oculto cambia, desencadena un evento que actualiza la vista de entrada con el contenido del cuadro, que analiza en función del valor (si es un 1, le agrega la clase especial).

Si quisieras ponerte elegante, obtendrías el CSS perfecto y agregarías un indicador de que el elemento tiene foco, o lo perderá como un gif animado o algo así (y también mantendrás un registro del personaje en el que está enfocado) .

Creo que esto es imposible. Tal vez yo estoy equivocado. Sigo pregunta para saber. 🙂

Ok, después de leer la respuesta de Ken Mazaika, lo sé mejor :).

No puede hacer que muestre letras y dígitos en diferentes colores, pero puede crear el elemento

o que se verá como entrada de texto y aplicará diferentes CSS a letras y dígitos dentro de él.

¿Quiere decir que desea escribir un carácter alfa y verlo en un color, y escribir un carácter de dígito y verlo en otro color? ¿Y qué quieres decir con “cuadro de texto”? o ?

Si te refieres a textarea, deberías poder usar la propiedad innerhtml del nodo DOM de textarea y analizarla para insertar html adicional alrededor de los caracteres / números que aplican colores diferentes. Si te refieres a un elemento de entrada, te sugiero que lo hagas de la manera incorrecta y que puede haber una manera más fácil de resolverlo. Tendrás que llegar desde el ángulo de valor allí y no estoy seguro de cómo hacerlo desde la parte superior de mi cabeza.