键入时如何设置文本输入的样式? [英] How can I style text input as I type?
问题描述
每次我在输入字段中键入一个字符时,我都会解析表达式以便得到:
- 令牌数组,即tokenArray = [2,*,COS,(,4,)]
- 相应的令牌类型数组,即tokenType = [NUMBER,OPERATOR,FUNCTION,(,NUMBER,)]
我需要根据每个令牌的令牌类型设置其样式(例如,为每个令牌分配不同的颜色).
我已经能够轻松地将输入文本的动态副本设置为不同的<div>
样式(不是输入文本本身,这是我要帮助的内容),如下所示:
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>
如何在输入的输入字段中直接设置输入文字的样式? 任何JavaScript解决方案?
更新
蒂姆对问题的答案在contenteditable div中替换innerHTML 提供了一些很好的帮助.
您将如何修改 http://jsfiddle.net/2rTA5/2/来解决在每次击键时都会重新解析整个可编辑内容?例如,假设您键入"= if(AND(3 = 2,A1:A4,OR(0,1)),5,6)",然后在每次击键时都以编程方式重写可编辑项(请参见上面的令牌描述) ),然后我失去了光标.
此解决方案如何忽略令牌,字符或节点的类型,而仅保存和恢复键击之前的绝对光标(从的开头)?
文本输入不支持样式化的内容.故事结束.
常见的解决方案是改用 contenteditable
./p>
Every time I type a character in an input field, I parse the expression so that I get:
- An array of tokens, i.e., tokenArray=[2, *, COS, (, 4, )]
- A corresponding array of token types, i.e., tokenType=[NUMBER, OPERATOR, FUNCTION, (, NUMBER, )]
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?
Text inputs do not support styled content. End of story.
A common solution is to use contenteditable
instead.
这篇关于键入时如何设置文本输入的样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!