¿Hay alguna forma de estilo de parte del valor de un campo de entrada?

Estoy trabajando con un campo y me gustaría diseñar una parte del campo para que el usuario escriba en un color diferente. Por ejemplo, digamos que la tiene una statement de estilo de color: red; y quiero cambiar una parte a color: blue; . ¿Hay alguna manera de que esto sea posible?

Si no hay (como sospecho), alguna idea creativa sobre cómo puedo simular este efecto mientras sigo conservando el margen semántico?

Sus sospechas son correctas: los estilos se aplicarán solo a toda la entrada.

Como los estilos pueden aplicarse solo a la totalidad de un elemento, una solución requerirá al menos un elemento por color requerido.

Considere la división del campo de entrada con respecto al punto en el que el usuario está haciendo cambios. Hay tres secciones de la entrada:

  • eso antes del punto en el cual los cambios se están aplicando
  • eso después del punto en el cual los cambios se están aplicando
  • que en el punto en que se están aplicando los cambios

No puede lograr esto con un solo elemento de entrada. Y como el punto en el que se aplican los cambios puede cambiar, las partes de la ‘entrada’ envueltas por los tres elementos también cambiarán. Se requiere JavaScript para una solución.

Inicialmente debe incluir un elemento de entrada regular y renunciar a cualquiera de los colores requeridos. Use JavaScript para reemplazar la entrada con un elemento contenedor adecuado. Esto se puede diseñar para imitar un elemento de entrada.

A medida que ocurren los cambios, use JavaScript para identificar las tres divisiones mencionadas anteriormente. Envuélvalos en elementos adecuados (los tramos serían ideales) y coloree según sea necesario.

Considere el siguiente punto de inicio para el marcado de reemplazo generado:

 
foo fizz bar

Use los eventos click, keydown y keyup para descubrir las tres divisiones para la entrada y aplicar wrap las tres partes de la entrada simulada según sea necesario.

Como han dicho otros, no puedes hacer esto con estilos y marcas estáticas.

Probablemente podrías hacerlo con un formulario basado en Flash.

Pero, si tuviera que hacerlo, usaría jQuery para superponer divs, con el texto coloreado, encima de .

Algoritmo:

  1. Use una normal con los estilos predeterminados que desee. El contenido de esta entrada nunca cambiará excepto por la acción del usuario.

  2. jQuery supervisa esa . Cuando detecta palabra (s) de activación, agrega un

    después de la entrada y lo rellena con la (s) palabra (s) activadora (s) – con el estilo que desee. Probablemente, un

    por palabra o frase es el mejor.

  3. jQuery posiciona el nuevo

    , absolutamente, directamente sobre la (s) palabra (s) activadora (s).
    Conseguir que la (s) palabra (s) de activación se desplace dentro de la puede que ni siquiera sea necesario, porque las palabras anteriores también podrían estar en la superposición

    – ya sea de estilo predeterminado o con visibility: hidden .
    Pero, si solo se desean las palabras del disparador en la superposición, usar una fuente de ancho fijo, como Courier, ayudará con el posicionamiento secundario.

  4. Tenga cuidado de que la plantilla no interfiera con el usuario que intente con el mouse o la tecla de ciertas partes de . IE, probablemente no quiera cubrir más de la que sea necesario, y configure un controlador click () para retransmitir el enfoque.


Enfoque alternativo, fácil de usar y más simple:

En lugar de tratar de hacer cosas funky, no esperadas por el usuario a la entrada, tomar una página de Jakob Nielsen y de sitios como StackOverflow.

Simplemente tenga una simple ‘ , pero debajo de ella, muestre el texto formateado a medida que entra.

Puede lograr esto con (mucho esfuerzo y) un div con el atributo contentEditable presente. Así es como la mayoría de los editores WYSIWYG basados ​​en web logran un rico formato de las entradas. Vea aquí para más información: http://ajaxian.com/archives/on-browser-wysiwyg

Puede mantener divs de estilo diferente uno al lado del otro en un contenedor superpuesto por una entrada transparente. Modifique los anchos de los divs con estilo en función de su entrada de entrada.

Por ejemplo, para ingresar el fondo de entrada para espacios iniciales y finales:

 

Los tres divs dentro del contenedor cambiarán su ancho con el cambio de entrada.

Verifique el ejemplo de trabajo en jsfiddle http://jsfiddle.net/TalhaAwan/ywyw4qq5/

Es posible que puedas hacerlo con algunos cambios en el sitio javascript (si no es posible en html / css puros):

http://www.appelsiini.net/projects/jeditable/default.html

Ese complemento jQuery no usa campos de entrada html, por lo que podría ser posible diseñar diferentes partes de la entrada. Tiene un par de ganchos para las devoluciones de llamadas que puede usar para darle estilo a la entrada. Espero que ayude como una idea.