PDA

View Full Version : Colorizing Textarea



Trinithis
06-24-2007, 07:53 PM
I'm making a regular expression tester (much like RegexBuddy if you are familiar with that). So far, I have gotten my script to work, and the user types in his regex. Then he enters text from a textarea, and in a separate div container, it copies the text and colorizes all the matches. Instead of having a separate div to do this, is is possible to markup textareas? I don't think so, and I have tried css positioning effects to superimpose the two containers by having the textarea transparent and putting the div below it. That worked fine until text passed a scrollbar length, in which when you scroll the textarea, the superposition fails, and it looks like blurred text. Any solution idea would be good, but if there are none, then I suppose I'll have to resort to displaying the two containers separately.

Here are the two different versions I have so far. Ignore the Replace and Output textfields.

Superimposed:
http://trinithis.awardspace.com/regexTester/regexTester3.html

Separated:
http://trinithis.awardspace.com/regexTester/regexTester2.html

If you know nothing about Regular Expressions, try inputting one or more dots (.) into Regex and any text into Test String.

Trinithis
06-25-2007, 05:13 PM
I think I got a satisfactory result by putting both the textarea and div within container, and setting their widths and heights to large and fixed numbers of em units. Then I set the container to a smaller size and set its overflow to scroll.

If you either find a better way yet or if you find a reason not to do this, please tell me.

http://trinithis.awardspace.com/regexTester/regexTester.html