我正在尝试创建一个简单的textarea,它将根据文本进行扩展。我还想语法高亮括号。这一切都相当很好,但并不完美。我在背景中使用隐藏的<pre>
执行此操作,其中包含正确调整区域大小所需的所有值。隐藏的<pre>
也包含括号的所有颜色。
首先,textarea的大小调整是坎坷的。出于某种原因,当您按Enter键时,文本会跳起来。它很容易重现。只需输入类似
的内容test
test
然后按回车键,你会看到我的意思。
其次是突出显示括号的问题。如果我插入一些相当大的东西,例如:)))))))))))))))))))(((((((((((((((((((((((((((((((((((((((((((((
,颜色会变得混乱。我不明白为什么。
再现这个bug的更疯狂的事情是
)))))))))))))))))))((((((((((((((((((((((((((((((((((((((((((((()))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))
感谢任何帮助,一个问题或另一个问题!
以下是代码小提琴的链接:http://jsfiddle.net/Axvgf/41/
提前致谢!
答案 0 :(得分:1)
如果括号不匹配,则不应计算深度。例如
)))(())
深度应该是,
undefined, undefined, undefined, 1, 2, 2, 1
或
0, 0, 0, 1, 2, 2, 1
只需将不匹配的括号红色和匹配的括号按其级别着色。
当您按Enter键时文本会跳起,因为您忽略了文本底部的空行。你也应该加上它的高度。
<强> CSS 强>
.defaultEm:{
font-size:1em;
position:absolute;
line-height:1;
padding:0;
visibility:hidden
}
<强>脚本强>
function getDefaultFontSize(pa){
pa= pa || document.body;
var who= document.createElement('span');
who.className= 'defaultEm';
who.appendChild(document.createTextNode('M'));
pa.appendChild(who);
var fs= [who.offsetWidth, who.offsetHeight];
pa.removeChild(who);
return fs;
}
和
var newHeight = $(newId + " pre").height() + getDefaultFontSize()[1]; //adding a height of line