Come posso assegnare un input di testo allo stile durante la digitazione?

Question

Ogni volta che digita un carattere in un campo di introduzione, ho analizzare l'espressione in modo che ottengo:

1. Un array di token, cioè, tokenArray = [2, *, COS, (4,)]
2. una corrispondente matrice di tipi di token, cioè, tokenType = [NUMERO, operatore, una funzione (NUMERO,)]

devo stile ogni token (ad esempio assegnando un colore diverso per ogni token) in base al rispettivo tipo di token.

ho potuto per lo stile facilmente una copia dinamica del testo di input in un diverso <div> (non il testo di input in sé, che è quello che sto chiedendo aiuto) come segue:

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> 

Come posso lo stile del testo di input direttamente nel campo di immissione in cui si digita? Qualche soluzione JavaScript?

UPDATE

risposta di Tim alla domanda replace innerHTML in contenteditable div offre qualche buon aiuto.

Come si modifica http://jsfiddle.net/2rTA5/2/ per quando per ogni keydown, uno reparses l'intero modificabile? Ad esempio, immagina di digitare "= if (AND (3 = 2, A1: A4, OR (0,1)), 5,6)" e, a ogni keydown, il modificabile viene riscritto a livello di codice (vedere la descrizione del token sopra) e perdo il cursore.

Come può questa soluzione ignorare il tipo di token o carattere o nodo e semplicemente salvare e ripristinare il cursore assoluto (dall'inizio della posizione) che era prima del keydown?

Answer 1

Gli input di testo non supportano il contenuto in stile. Fine della storia.

Una soluzione comune è utilizzare contenteditable.

Answer 2

come detto Matt, <input> s non supportano il contenuto di stile. Tuttavia, una possibile soluzione potrebbe essere quella di utilizzare un secondo <span> che conterrà il valore dell'input e mostrarlo qui. Se ciò non è accettabile, utilizzare contenteditable come suggerito da Matt.

Answer 3

È possibile creare una sorta di mod scollatura dietro di esso se è solo per l'estetica senza importanza.

• Fare lo sfondo e il testo del <input> trasparente
• avere un altro <span> dietro
• aggiornare il contenuto del <span> (con uno stile appropriato) quando il contenuto del <input> s' cambiano

Here's a quick demo.