Every time I type a character in an input field, I parse the expression so that I get:
I need to style each token (for instance assigning a different color to each token) based on its respective token type.
I have been able to easily style a dynamic copy of the input text in a different <div>
(not the input text itself, which is what I am asking for help) as follows:
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>
How can I style the input text directly in the input field where I type? Any JavaScript solution?
UPDATE
Tim's answer to the question replace innerHTML in contenteditable div provides some good help.
How would you modify http://jsfiddle.net/2rTA5/2/ to solve for when at every keydown, one reparses the entire editable? For example, imagine you type "=if(AND(3=2,A1:A4,OR(0,1)),5,6)" and, at every keydown the editable gets programmatically re-written (see token description above) and I lose the cursor.
How can this solution ignore the type of token or character or node and simply save and restore the absolute cursor (from the beginning of the ) position that was before the keydown?
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section.
Answer: Use the HTML5 contenteditable Attribute You can set the HTML5 contenteditable attribute with the value true (i.e. contentEditable="true" ) to make an element editable in HTML, such as <div> or <p> element.
Text inputs do not support styled content. End of story.
A common solution is to use contenteditable
instead.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With