¿Cómo puedo aplicar estilo a la entrada de texto mientras escribo?

Question

Cada vez que escribe un carácter en un campo de entrada, I analizar la expresión de modo que consiga:

1. Una serie de fichas, es decir, tokenArray = [2, *, COS, (, 4,)]
2. una matriz correspondiente de tipos de tokens, es decir, TokenType = [número, operador, FUNCTION, (, número,)]

necesito el estilo de cada ficha (por ejemplo la asignación de un color diferente para cada token) en función de su tipo de token respectivo.

he podido estilo fácilmente una copia dinámica del texto de entrada en un <div> (en sí misma no es el texto de entrada, que es lo que estoy pidiendo ayuda) diferente de la siguiente manera:

JavaScript:

function processExpression() { 
    var userInput = document.getElementById('inputText').value; 

     var resultOutput = parse(userInput); //this generates the two arrays described above 

     for (i in tokenArray) 
      newHTML += "<span style='color: " + colorMap[ tokenType[i] ] + " '>" + tokenArray[i] + "</span>"; 

      document.getElementById('styledExpression').innerHTML = newHTML; 
} 

HTML:

<input type="text" id="inputText" value="" placeholder="Type expression" size="40" 
     onKeyDown="processExpression();" 
     onKeyUp="processExpression();"/> 

<div id="styledExpression" value=""></div> 

Cómo puedo estilo I del texto de entrada directamente en el campo de entrada donde escribo? ¿Alguna solución de JavaScript?

ACTUALIZACIÓN

respuesta de Tim a la pregunta replace innerHTML in contenteditable div proporciona una buena ayuda.

¿Cómo se modificaría http://jsfiddle.net/2rTA5/2/ para resolver cuando en cada keydown, uno repara todo el editable? Por ejemplo, imagina que escribes "= if" (AND (3 = 2, A1: A4, OR (0,1)), 5,6) "y, en cada keydown, el editable se vuelve a escribir programáticamente (ver la descripción del token arriba)) y pierdo el cursor.

¿Cómo puede esta solución ignorar el tipo de token o carácter o nodo y simplemente guardar y restaurar el cursor absoluto (desde el comienzo de la) posición que estaba antes de la tecla?

Answer 1

Las entradas de texto no son compatibles con el contenido con estilo. Fin de la historia.

Una solución común es usar contenteditable en su lugar.

Answer 2

como dijo Matt, <input> s no son compatibles con el contenido de estilo. Sin embargo, una posible solución podría ser utilizar un segundo <span> que contendrá el valor de la entrada y mostrar el contenido con estilo aquí. Si eso no es aceptable, entonces use contenteditable como sugirió Matt.

Answer 3

Puede clasificar el estilo detrás de él si es solo por estética sin importancia.

• hacer el fondo y el texto de la <input> transparente
• tener otro <span> detrás de él
• actualizar el contenido de la <span> (con un estilo apropiado) cuando el contenido del 's del <input> cambian

Here's a quick demo.