自动调整大小textarea是颠簸+突出显示括号

时间:2012-12-26 17:06:47

标签: javascript jquery textarea syntax-highlighting parentheses

我正在尝试创建一个简单的textarea,它将根据文本进行扩展。我还想语法高亮括号。这一切都相当很好,但并不完美。我在背景中使用隐藏的<pre>执行此操作,其中包含正确调整区域大小所需的所有值。隐藏的<pre>也包含括号的所有颜色。

首先,textarea的大小调整是坎坷的。出于某种原因,当您按Enter键时,文本会跳起来。它很容易重现。只需输入类似

的内容
test
test

然后按回车键,你会看到我的意思。

其次是突出显示括号的问题。如果我插入一些相当大的东西,例如:)))))))))))))))))))(((((((((((((((((((((((((((((((((((((((((((((,颜色会变得混乱。我不明白为什么。

再现这个bug的更疯狂的事情是

 )))))))))))))))))))((((((((((((((((((((((((((((((((((((((((((((()))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))

感谢任何帮助,一个问题或另一个问题!

以下是代码小提琴的链接:http://jsfiddle.net/Axvgf/41/

提前致谢!

1 个答案:

答案 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

固定高度:http://jsfiddle.net/ACF8e/