Download free, quick and easy CSS styles for creating iPhone applications using Apple's design specifications.

A coworker of mine created his first iPhone web app, iPhone Lease Calculator, and needed a visual skin on it. I set out to create simple styles so you can easily implement web apps using Apple's recommended iPhone user interface. These styles are used for laying out forms, and limited text styles.

There are two main styles, the Edge to Edge design, and the Rounded Corners design.

Edge-To-Edge Design: Forms

<dl class="edgeToEdge formFields">
  <dt>
    <label for="txt_name">Name:</label>
  </dt>
  
  <dd>
    <input type="text" name="full_name" value="">
  </dd>
</dl>

Pretty simple. The edge to edge design is recommended for most forms. It's not too attractive looking and provides maximum readability. I decided that a definition list provides the greatest flexibility in design and the most meaning for the markup.

A gray border is placed below each row. The last row should not have a border, so add the "last" className to the last DD tag in the definition list.

<dl class="edgeToEdge formFields">
  <dt>
    <label for="txt_name">Name:</label>
  </dt>
  
  <dd class="last">
    <input type="text" name="full_name" value="">
  </dd>
</dl>

Rounded Corners: Forms

<dl class="roundedRect formFields">
  <dt>
    <label for="txt_name">Name:</label>
  </dt>
  
  <dd>
    <input type="text" name="full_name" value="">
  </dd>
</dl>

So really not much different here. The rounded corners design uses the same basic markup with the exception of a different className. This will get the white, rounded corner box. The only thing that's missing is a label:

<h1 class="roundedRectHead">
  Enter your name
</h1>

<dl class="roundedRect formFields">
  ...
</dl>

While that may work for most uses, FIELDSETs and LEGENDs are also very useful on forms.

<fieldset class="roundedRect">
  
  <legend>Enter your name</legend>
  
  <dl class="formFields">
    ...
  </dl>
  
</fieldset>

This requires just a slightly different markup structure. The "roundedRect" className is moved to the FIELDSET tag, and the DL tag only has the "formFields" className.

At some point you'll want buttons on your form.

Edge-To-Edge: Buttons

<p class="edgeToEdge formButtons">
  <input type="submit" value="Submit Name">
</p>

Rounded Corners: Buttons

<p class="roundedRect formButtons">
  <input type="submit" value="Submit Name">
</p>

Showing Form Submission Results

Once the user has submitted the form, you'll want to display some sort of message or result.

<h1 class="roundedRectHead">
  Your name is:
</h1>
<p class="roundedRect formResults">
  John Doe
</p>

These styles aren't anything special and just seek to implement Apple's iPhone user interface on a web application viewed in iPhone's Safari web browser. This will integrate your Web application seamlessly into the iPhone's inherent user interface. And as usual, if I change anything, I'll be sure to post it.

• Download iPhoneUI.css
• iPhone Lease Calculator

Easily create a JavaScript enhanced code editor with any TEXTAREA that includes auto-indent, tab stops, auto-complete, XHTML compatibility and more. Did I mention it's free?

I've worked with several older web-based content management systems, that store template code in a database. That means writing HTML in a TEXTAREA. Yuck! Many of them have been updated to include a WYSIWYG editor, be it Java or JavaScript-based. As good as they are, I still yearn for code. Pure, unadulterated, geeky, I'm-in-total-control ... code.

Even with a fancy WYSIWYG editor at my disposal, I turn it off. A plain old TEXTAREA will suffice, but I miss the coding assistance of a real text editor like HTML Kit. I want complete control of my code, and I want a smart code editor all on a Web page. So I built one.

Features of the JavaScript TextEditor:

• Unobtrusive JavaScript. No need to clutter up your HTML with event handlers.
• Object-oriented JavaScript. Helps keep the global JavaScript namespace clean and tidy, and simplifies interacting with the editor using JavaScript.
• Create as many code editors as you want. Want more than one code editor on a page? No problem. Have as many as you want.
• Create HTML tags in upper or lower case. The HTML 4.01 doctype declares HTML tags in upper case even though they aren't case sensitive. You can have it either way.
• Set tab stops. When you press the TAB key, it inserts enough spaces to get to the next tab stop. Nice for indenting code.
• Block Indent. Select several lines of code and hit the TAB key to indent all the lines, or hold the Shift key and hit TAB to unindent each line by one tab stop.
• Auto-Indent. When you press the ENTER or RETURN keys, the cursor and code is indented automatically to where you were on the previous line.
• Auto-Complete. Greatly speed up your coding by typing an HTML tag name, highlighting it, then holding the Ctrl and Shift keys down and pressing the "<" key. BAM! Automatic opening and closing tags are created, plus commonly used attributes, and applicable child tags.
• XHTML compatible. The auto complete feature is XHTML aware.
• Tabify and Detabify. Did someone actually use real TAB characters to indent the code!? *gasp* Functions are included to convert those pesky tabs to tab stops, and then back again. You'll have to provide the button and the onclick, but the function is available.
• Escape and Unescape HTML. Does just what it says: Converts "&", "<" and ">" characters to HTML entities, and you can change them back again. Of course you'll need to supply your own button and onclick, but the function is there.
• Convert newlines to <br> and <p>. Select a bunch of text, and a function can convert all newline characters to page break and paragraph tags. You'll need to create the button and onclick.

The JavaScript TextEditor is completely customizable. When creating it, you can pass several options on a case-by-case basis so every editor can be different.

Browser support for version 0.1

It's an early version and works only in Opera and Firefox on Windows. I tested Safari 3.03 on Windows and found a bug . The Control, Shift and Alt keys do not generate keydown, keypress or keyup events on TEXTAREA's, so the auto complete feature doesn't work, but tab stops and auto indent do. I've reported the bug to Apple.

Mac OS support is upcoming. I need to turn off my PC and fire up my Mac. TextEditor might work on Mac OS right now, but I'll have to double check the keyCodes generated by the event object so the Control, Shift and Tab keys are captured properly.

Internet Explorer users? Well. Your browser sucks and doesn't support the standard methods used to manipulate text in the TEXTAREA, but fear not, Internet Explorer support is pending too. But enough yackin', let's see the code:

Source code for the JavaScript TextEditor

Just click on the box below to select it, then copy.

/* Author: Greg Burghardt greg [underscore] burghardt [at] yahoo [dot] com Copyright 2007, Greg Burghardt This program is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA http://www.gnu.org/licenses/lgpl.txt */ /** * @author Greg Burghardt * @email greg [underscore] burghardt [at] yahoo [dot] com * @url fundamentaldisaster.blogspot.com * @date Sept. 26, 2007 * @version 0.1 * * * @constructor TextEditor * Creates a text editor that contains many of the features a desktop * application has. * * @param editor (string or object, required) * Id or node reference to the TEXTAREA used as a code editor. * * @param options (object, optional) * An object containing additional configuration options. The options * parameter may contain the following properties and values: * * enableAutoIndent (boolean) Turn auto indenting on or off * tabStop (integer) Number of space characters each tab is worth. * * * @property capitalizeTagName (boolean) * HTML tag names will be capitalized when using auto-complete. * * @property enableAutoIndent (boolean) * Enable or disable auto indent on the editor. * * @property enabled (boolean) * Whether or not the current instance of TextEditor is enabled for the * TEXTAREA. * * @property editor (object) * Node reference to the TEXTAREA object that is the code editor. * * @property editorLineHeight (number) * The height in pixels of a line of text in the editor. This is only used * for Gecko browsers, which scroll to the top of the TEXTAREA whenever * text is inserted. This allows the JavaScript to scroll down one line * when the user presses the ENTER key. * * @property editorMode (string) * Can be "HTML" or "XHTML". When set to XHTML, the auto complete tags are * XHTML compatible. * * @property isIE (boolean) * True if the browser is Internet Explorer, false otherwise. * * @property isOpera (boolean) * True if the browser is Opera. * * @property isSupported (boolean) * True if the browser supports all the API, false otherwise. Current * Internet Explorer is not supported. * * @property KEY_CODES (object, constant) * An object containing the keyCode values for various keys on the * keyboard. Initially this property is null, as different browsers on * different operating systems use different values. * * @property KEY_CODES_GECKO (object, constant) * The keyCode values known to be used by the Gecko (Firefox) rendering * engine. * * @property KEY_CODES_OPERA (object, constant) * The keyCode values known to be used by the Opera browser. * * @property KEY_CODES_WEBKIT (object, constant) * The keyCode values known to be used by the Webkit (Safari) rendering * engine. * * @property KEY_STATES (object) * Tells when the SHIFT, TAB or CONTROL keys are down. * * @property tabStop (integer) * Number of spaces a tab stop should be. * * @property TAGS_EMPTY (array, constant) * Array of HTML tags that are empty elements, which have no closing tag * and must be closed with XHTML. * * @property TAGS_WITH_OPTIONS (array, constant) * Array of HTML tags and special characters that have additional markup * for the auto-complete. * * @property version (float) * The current version of the TextEditor class. * */ function TextEditor(editor, options) { var prop; var editorBoxes; var i = 0; var end = 0; if (this.isSupported) { // Set unique properties this.capitalizeTagNames = false; this.enableAutoIndent = true; this.enabled = false; this.editor = typeof(editor) === 'string' ? document.getElementById(editor) : editor; this.editorLineHeight = -1; this.editorMode = 'HTML'; this.tabStop = 2; // Do not support Internet Explorer for right now... if (typeof(this.editor.setSelectionRange) === 'function') { // Set the options if (options) { for (prop in options) { this[prop] = options[prop]; } this.editorMode = this.editorMode.toUpperCase(); } // Assign correct key codes if (navigator.userAgent.indexOf('Gecko') > -1 || navigator.userAgent.indexOf('WebKit') > -1) { this.KEY_CODES = this.KEY_CODES_GECKO; } else if (window.opera || navigator.userAgent.indexof('Opera') > -1) { this.KEY_CODES = this.KEY_CODES_OPERA; } else { this.KEY_CODES = this.KEY_CODES_GECKO; } // Assign event handlers to the editor this.editor.onkeydown = this.getEditorKeyDownFn(this); this.editor.onkeyup = this.getEditorKeyUpFn(this); // Attaches functions as a hack to get Opera to disable the TAB key if (this.isOpera) { this.editor.onblur = this.getEditorBlurFn(this.KEY_CODES.TAB); this.editor.onfocus = this.getEditorFocusFn(); } this.enabled = true; } else { this.isSupported = false; } } } TextEditor.prototype = { isSupported: !!document.getElementById, isIE: document.getElementById && document.all && document.selection && window.ActiveX && !window.opera ? true : false, isOpera: window.opera ? true : false, KEY_CODES: null, KEY_CODES_GECKO: { ANGLE_BRACKET_LEFT: 188, ANGLE_BRACKET_RIGHT: 190, ENTER: 13, ALT: 18, CONTROL: 17, CURLY_BRACE_LEFT: 219, CURLY_BRACE_RIGHT: 221, SHIFT: 16, TAB: 9 }, KEY_CODES_OPERA: { ANGLE_BRACKET_LEFT: 44, ANGLE_BRACKET_RIGHT: 46, ENTER: 13, ALT: 18, CONTROL: 17, CURLY_BRACE_LEFT: 91, CURLY_BRACE_RIGHT: 93, SHIFT: 16, TAB: 9 }, KEY_CODES_WEBKIT: { ANGLE_BRACKET_LEFT: 188, ANGLE_BRACKET_RIGHT: 190, ENTER: 13, ALT: 18, CONTROL: 17, CURLY_BRACE_LEFT: 219, CURLY_BRACE_RIGHT: 221, SHIFT: 16, TAB: 9 }, KEY_STATES: { ALT_DOWN: false, CONTROL_DOWN: false, SHIFT_DOWN: false }, TAGS_EMPTY: ['base','br','hr','img','input','link','meta','param'], TAGS_WITH_OPTIONS: ['a','abbr','acronym','blockquote','button','div','dl','fieldset','form','iframe','img','input','link','label','meta','ol','optgroup','option','param','php','script','select','span','style','table','tbody','td','textarea','tfoot','thead','tr','ul','!','=','%'], version: 0.1, /** * @class TextEditor * * @function changeEditorMode * Switches the editor mode. * * @param currentMode (string, required) * The current mode. * * @return string * The new editor mode. */ changeEditorMode: function(currentMode) { this.editorMode = currentMode.toUpperCase() === 'XHTML' ? 'HTML' : 'XHTML'; return this.editorMode; }, /** * @class TextEditor * * @function changeTabStop * Changes the tab stop used in the editor. * * @param newStop (number, required) * Number of spaces the new tab stop will be. * * @return void */ changeTabStop: function(newStop) { if (typeof(newStop) === 'number' && newStop > 0) { this.tabStop = newStop; } }, /** * @class TextEditor * * @function convertToParagraphs * Takes the selected text and converts newlines into paragraphs. * * @param void * * @return void */ convertToParagraphs: function() { var value = this.getSelectedText(); var start = this.editor.selectionStart; value = this.nl2p(value); this.insertText(value); this.editor.setSelectionRange(start, start + value.length); }, /** * @class TextEditor * * @function createTag * Creates markup tags and sets the cursor. * * @param tagName (string, required) * Text to be used as the HTML tag. */ createTag: function(tagName) { var tagIndex = this.getIndex(tagName, this.TAGS_WITH_OPTIONS); var tagStr = ''; var tabStop = this.repeatChars(this.tabStop); var allCaps = this.editorMode === 'HTML' && this.capitalizeTagNames ? true : false; var emptyTagClose = this.editorMode === 'XHTML' ? ' />' : '>'; if (this.editorMode === 'HTML' && this.capitalizeTagNames) { tagName = tagName.toUpperCase(); } else { tagName = tagName.toLowerCase(); } if (tagIndex === -1) { // Tag isn't special, just open and close it. if (this.getIndex(tagName, this.TAGS_EMPTY) < 0) { tagStr = '<'+tagName+'>|</'+tagName+'>'; } else { tagStr = '<'+tagName+emptyTagClose+'|'; } } else { // The following tags are special cases, additional markup is created switch (tagName.toLowerCase()) { case 'a': tagStr = '<'+tagName+' href="">|</a>'; break; case 'abbr': case 'acronym': tagStr = '<'+tagName+' title="|"></'+tagName+'>'; break; case 'blockquote': tagStr = '<'+tagName+' cite="">|</'+tagName+'>'; break; case 'button': tagStr = '<'+tagName+' type="|" value=""></'+tagName+'>'; break; case 'div': case 'span': tagStr = '<'+tagName+'|></'+tagName+'>'; break; case 'dl': if (!allCaps) { tagStr = '<dl>\n'+tabStop+'<dt>|</dt>\n'+tabStop+'<dd></dd>\n</dl>'; } else { tagStr = '<DL>\n'+tabStop+'<DT>|</DT>\n'+tabStop+'<DD></DD>\n</DL>'; } break; case 'fieldset': if (!allCaps) { tagStr = '<'+tagName+'>\n'+tabStop+'<legend>|</legend>\n</'+tagName+'>'; } else { tagStr = '<'+tagName+'>\n'+tabStop+'<LEGEND>|</LEGEND>\n</'+tagName+'>'; } break; case 'form': tagStr = '<'+tagName+' method="post" action="" id="">|</'+tagName+'>'; break; case 'iframe': tagStr = '<'+tagName+' src="|" width="" height="" name="" id="" frameborder="0"></'+tagName+'>'; break; case 'img': tagStr = '<'+tagName+' src="|" width="" height="" alt=""' + emptyTagClose; break; case 'input': tagStr = '<'+tagName+' type="|" name="" id="" value=""' + emptyTagClose; break; case 'link': tagStr = '<'+tagName+' rel="stylesheet" type="text/css" media="screen" href="|"' + emptyTagClose; break; case 'label': tagStr = '<'+tagName+' for="">|</'+tagName+'>'; break; case 'meta': tagStr = '<'+tagName+' name="|" content=""' + emptyTagClose; break; case 'ol': case 'ul': if (!allCaps) { tagStr = '<'+tagName+'>\n'+tabStop+'<li></li>|\n</'+tagName+'>'; } else { tagStr = '<'+tagName+'>\n'+tabStop+'<LI></LI>|\n</'+tagName+'>'; } break; case 'optgroup': if (!allCaps) { tagStr = '<'+tagName+' label="|">\n'+tabStop+'<option value=""></option>\n</'+tagName+'>'; } else { tagStr = '<'+tagName+' label="|">\n'+tabStop+'<OPTION value=""></OPTION>\n</'+tagName+'>'; } break; case 'option': tagStr = '<'+tagName+' value="|"></'+tagName+'>'; break; case 'param': tagStr = '<'+tagName+' name="|" value=""' + emptyTagClose; break; case 'php': tagStr = '<?php|?>'; break; case '=': tagStr = '<?=|?>'; break; case 'script': tagStr = tagStr = '<'+tagName+' type="text/javascript">|</'+tagName+'>'; break; case 'select': if (!allCaps) { tagStr = '<'+tagName+' name="" id="">\n'+tabStop+'<option value=""></option>|\n</'+tagName+'>'; } else { tagStr = '<'+tagName+' name="" id="">\n'+tabStop+'<OPTION value=""></OPTION>|\n</'+tagName+'>'; } break; case 'style': tagStr = '<'+tagName+' type="text/css" media="screen">|</'+tagName+'>'; break; case 'table': tagStr = '<'+tagName+' cellpadding="0" cellspacing="0" border="0">|</'+tagName+'>'; break; case 'tbody': if (!allCaps) { tagStr = '<'+tagName+'>\n'+tabStop+'<tr>\n'+tabStop+tabStop+'<td headers=""></td>|\n'+tabStop+'</tr>\n</'+tagName+'>'; } else { tagStr = '<'+tagName+'>\n'+tabStop+'<TR>\n'+tabStop+tabStop+'<TD headers=""></TD>|\n'+tabStop+'</TR>\n</'+tagName+'>'; } break; case 'td': tagStr = '<'+tagName+' headers="">|</'+tagName+'>'; break; case 'textarea': tagStr = '<'+tagName+' cols="50" rows="10" name="|" id=""></'+tagName+'>'; break; case 'tfoot': if (!allCaps) { tagStr = '<'+tagName+'>\n'+tabStop+'<tr>\n'+tabStop+tabStop+'<th></th>|\n'+tabStop+'</tr>\n</'+tagName+'>'; } else { tagStr = '<'+tagName+'>\n'+tabStop+'<TR>\n'+tabStop+tabStop+'<TH></TH>|\n'+tabStop+'</TR>\n</'+tagName+'>'; } break; case 'thead': if (!allCaps) { tagStr = '<'+tagName+'>\n'+tabStop+'<tr>\n'+tabStop+tabStop+'<th id=""></th>|\n'+tabStop+'</tr>\n</'+tagName+'>'; } else { tagStr = '<'+tagName+'>\n'+tabStop+'<TR>\n'+tabStop+tabStop+'<TH id=""></TH>|\n'+tabStop+'</TR>\n</'+tagName+'>'; } break; case 'tr': if (!allCaps) { tagStr = '<'+tagName+'>\n'+tabStop+'<td headers=""></td>|\n</'+tagName+'>'; } else { tagStr = '<'+tagName+'>\n'+tabStop+'<TD headers=""></TD>|\n</'+tagName+'>'; } break; case '!': tagStr = '<!-- | -->'; break; case '%': tagStr = '<%|%>'; break; } } return tagStr; }, /** * @class TextEditor * * @function countChars * Counts the number of instances of the given character in the given * string. * * @param ch (string, required) * The character to search for * * @param str (string, required) * The string to search in. * * @return integer * The number of times ch occured in str. */ countChars: function(ch, str) { var i = 0; var end = str.length; var count = 0; for (i; i < end; i++) { if (str.charAt(i) == ch) { count++; } } return count; }, /** * @class TextEditor * * @function destroy * Should be called in window.onunload event to remove common causes of * memory leaks in browsers. * * @param void * * @return void */ destroy: function() { this.editor = null; }, /** * @class TextEditor * * @function detabify * Replaces all tab characters with a number of spaces equal to the * tab stop. * * @param void * * @return void */ detabify: function() { var selText = this.getSelectedText(); var start = this.editor.selectionStart; selText = this.tab2Tabstop(selText); this.insertText(selText, null, null, false); this.editor.setSelectionRange(start, start + selText.length); this.setFocus(); }, /** * @class TextEditor * * @function doAutoIndent * Creates the auto-indent when the user presses ENTER. * * @param void * * @return integer * Number of spaces the auto-indent was. */ doAutoIndent: function() { var ch = ''; var i = 0; var indentLength = -1; var newlineFound = false; var start = this.editor.selectionStart; var value = this.editor.value; var valueLength = value.length; if (this.enableAutoIndent) { if (start === 0) { // Cursor is at text beginning, indent length is zero indentLength = 0; } // Detect auto indent if not already found if (indentLength < 0) { indentLength = 0; if (start > 1 && value.length > 1) { // Cursor is at text end i = start - 2; } else { // Cursor is not at newline or end i = start; } // Go back to beginning of current line while (i > 0 && !newlineFound) { if (value.charAt(i) === '\n') { newlineFound = true; } i--; } if (newlineFound) { // Not at beginning of text, go 1 char past newline i += 2; } else { // No newline was found, at begining of text i = 0; } // Get the current char ch = value.charAt(i); // Go forward until non white space char is found or cursor is // reached, count iterations while(i < start && ch === ' ') { indentLength++; i++; ch = value.charAt(i); } } // Insert the text if (indentLength > 0) { if (start == this.editor.selectionStart) { start += indentLength; } this.insertText(this.repeatChars(indentLength), null, null, false); this.editor.setSelectionRange(start, start); } } return indentLength; }, /** * @class TextEditor * * @function doBlockIndent * Indents a block of text backward or forward. * * @param backward (boolean, optional) * Indents text backwards if true, forwards if false. Default is false. * * @return void */ doBlockIndent: function(backward) { // Shared var start = start = this.getLineStartPosition(this.editor.value, this.editor.selectionStart); var end = this.getLineEndPosition(this.editor.value, this.editor.selectionEnd); var ch = this.editor.value.charAt(start); var curPos = start; var value = ''; var valueLength = this.editor.value.length; // Indenting forwards var endOffset = 0; var tabStopStr = this.repeatChars(this.tabStop); // Indenting backwards var snippetEnd = 0; var snippetStr = ''; var txtLinesLength = 0; var txtLines = []; var i = 0; var numCharsRemoved = 0; start = this.getLineStartPosition(this.editor.value, start); end = this.getLineEndPosition(this.editor.value, end); this.editor.setSelectionRange(start, end); value = this.editor.value.substring(start, end); if (backward) { // Indent backwards txtLines = value.split('\n'); txtLinesLength = txtLines.length; for (i = 0; i < txtLinesLength; i++) { snippetStr = txtLines[i]; snippetEnd = 0; while (snippetEnd < this.tabStop && snippetStr.charAt(snippetEnd) === ' ') { snippetEnd++; numCharsRemoved++; } if (snippetEnd > 0) { txtLines[i] = snippetStr.substring(snippetEnd, snippetStr.length); } } value = txtLines.join('\n'); } else { // Indent forwards endOffset += this.countChars('\n', value) * this.tabStop; value = value.replace(/\n/g, '\n' + tabStopStr); value = tabStopStr + value; endOffset += this.tabStop; } this.insertText(value, null, null, false); this.editor.setSelectionRange(start, end + endOffset - numCharsRemoved); }, /** * @class TextEditor * * @function editorOnKeyDown * The function executed every time a keyboard button is pressed. * * @param e (object, required) * Reference to the event object generated by the keydown event. * * @return boolean * If false is returned, the button press event is canceled so * JavaScript can do some custom work. True is returned so the pressed * button acts normally. */ editorOnKeyDown: function(e) { var r = true; var tagStr = ''; // Hack for Opera so it disables the TAB key this.lastKey = e.keyCode; // Record states of keys on keyboard switch(e.keyCode) { case this.KEY_CODES.SHIFT: this.KEY_STATES.SHIFT_DOWN = true; break; case this.KEY_CODES.CONTROL: this.KEY_STATES.CONTROL_DOWN = true; break; case this.KEY_CODES.ALT: this.KEY_STATES.ALT_DOWN = true; break; } // Do actions for specific keys switch (e.keyCode) { case this.KEY_CODES.TAB: r = false; if (this.editor.selectionStart == this.editor.selectionEnd) { // Insert a tab stop this.insertText(this.repeatChars(this.getAutoTabLength()), null, null, true); } else { // Block indent forwards or backwards this.doBlockIndent(this.KEY_STATES.SHIFT_DOWN); } break; case this.KEY_CODES.ANGLE_BRACKET_LEFT: if (this.KEY_STATES.CONTROL_DOWN && this.KEY_STATES.SHIFT_DOWN) { r = false; this.insertOpenCloseTags(); } else if (this.KEY_STATES.CONTROL_DOWN) { r = false; this.insertOpenTag(); } break; case this.KEY_CODES.ANGLE_BRACKET_RIGHT: if (this.KEY_STATES.CONTROL_DOWN && this.KEY_STATES.SHIFT_DOWN) { r = false; this.insertClosedEmptyTag(); } else if (this.KEY_STATES.CONTROL_DOWN) { r = false; this.insertCloseTag(); } break; } return r; }, /** * @class TextEditor * * @function editorOnKeyPressFn * The function executed every time a keyboard button is pressed. * * @param e (object, required) * Reference to the event object generated by the keypress event. * * @return boolean * If false is returned, the button release event is canceled so * JavaScript can do some custom work. True is returned so the released * button acts normally. */ editorOnKeyPress: function(e) { return true; }, /** * @class TextEditor * * @function editorKeyUpFn * The function executed every time a keyboard button is released. * * @param e (object, required) * Reference to the event object generated by the keyup event. * * @return boolean * If false is returned, the button release event is canceled so * JavaScript can do some custom work. True is returned so the released * button acts normally. */ editorKeyUpFn: function(e) { var r = true; // Record states of keys on keyboard switch(e.keyCode) { case this.KEY_CODES.SHIFT: this.KEY_STATES.SHIFT_DOWN = false; break; case this.KEY_CODES.CONTROL: this.KEY_STATES.CONTROL_DOWN = false; break; case this.KEY_CODES.ALT: this.KEY_STATES.ALT_DOWN = false; break; } switch (e.keyCode) { case this.KEY_CODES.ENTER: this.doAutoIndent(); break; } return r; }, /** * @class TextEditor * * @function escape * Escapes the text selected in the editor. * * @param void * * @return void */ escape: function() { var escapeText = this.getSelectedText(); var start = this.editor.selectionStart; escapeText = this.escapeHTML(escapeText); this.insertText(escapeText, null, null, true); }, /** * @class TextEditor * * @function escapeHTML * Converts special characters to HTML friendly characters. * * @param str (string, required) * The string to escape and make HTML friendly. * * @return string * The HTML escaped string. */ escapeHTML: function(str) { str = str.replace(/&/g, '&amp;'); str = str.replace(/>/g, '&gt;'); str = str.replace(/</g, '&lt;'); return str; }, /** * @class TextEditor * * @function focus * Sets focus to the editor text field. * * @param void * * @return void */ focus: function() { this.editor.focus(); }, /** * @class TextEditor * * @function getAutoTabLength * Returns the length of the auto tab when you hit TAB. * * @param void * * @return integer * The number of spaces for the auto tab. */ getAutoTabLength: function() { var start = this.editor.selectionStart; var allText = this.editor.value; var lineStart = this.getLineStartPosition(allText, start); var lineOffset = start - lineStart; var indentLength = start - lineStart; var indentModulus = indentLength % this.tabStop; if (indentModulus === 0) { return this.tabStop; } else { return indentModulus; } }, /** * @class TextEditor * * @function getComputedStyle * Used to get the computed style of an element. This is only used in a * hack to get Gecko browsers to refrain from scrolling the editor back * to the top when text is inserted into the editor. * * @param el (object, required) * The DOM object to get the computed style of. * * @param prop (string, required) * The style property you want the value for. * * @return variable * The value of the property, most likely a string, or null if this * function is not properly supported. */ getComputedStyle: function(el, prop) { var val = null; if (document.defaultView && document.defaultView.getComputedStyle) { val = document.defaultView.getComputedStyle(el, null)[prop]; } return val; }, /** * @class TextEditor * * @function getIndex * Looks for the needle in the haystack and returns its index. * * @param needle (variable, required) * The value to look for. * * @param haystack (array, required) * The array in which to search. * * @return integer * The index at which the needle was found, or -1 if not found. */ getIndex: function(needle, haystack) { var i = 0; var end = haystack.length; for (i; i < end; i++) { if (haystack[i] == needle) { return i; } } return -1; }, /** * @class TextEditor * * @function getEditorBlurFn * The onblur event handler for the editor TEXTAREA. This is used in * conjunction with a small hack that allows Opera to "disable" the * tab key. * * @param void * * @return void */ getEditorBlurFn: function(TAB_KEY) { function doBlur(e) { if (!e) { e = window.event; } if (this.lastKey == TAB_KEY) { this.focus(); } } return doBlur; }, /** * @class TextEditor * * @function getEditorFocusFn * The onfocus event handler for the editor TEXTAREA. This is used in * conjunction with a small hack that allows Opera to "disable" the * tab key. * * @param void * * @return void */ getEditorFocusFn: function() { function doFocus(e) { this.lastKey = null; } return doFocus; }, /** * @class TextEditor * * @function getEditorKeyDownFn * Returns a function object executed every time a key is pressed down * while the editor text box has focus. * * @param instance (object, required) * The current instance of this class. * * @return function * The function to be executed onkeydown. False is returned by the inner * function for the cases where the default browser action for that * pressed key should be canceled. Otherwise, true is returned so the * default browser action for that key goes through. */ getEditorKeyDownFn: function(instance) { function doKeyDown(e) { if (!e) { e = window.event; } this.lastKey = e.keyCode; return instance.editorOnKeyDown(e); } return doKeyDown; }, /** * @class TextEditor * * @function getEditorKeyPressFn * Returns a function object executed every time a key is pressed while * the editor text box has focus. * * @param instance (object, required) * The current instance of this class. * * @return function * The function to be executed onkeypress. False is returned by the * inner function for the cases where the default browser action for * that pressed key should be canceled. Otherwise, true is returned so * the default browser action for that key goes through. */ getEditorKeyPressFn: function(instance) { function doKeyPress(e) { if (!e) { e = window.event; } return instance.editorOnKeyPress(e); } return doKeyPress; }, /** * @class TextEditor * * @function getEditorKeyUpFn * Returns a function object executed every time a key is released while * the editor text box has focus. * * @param instance (object, required) * The current instance of this class. * * @return function * The function to be executed onkeyup. False is returned by the inner * function for the cases where the default browser action for that * pressed key should be canceled. Otherwise, true is returned so the * default browser action for that key goes through. */ getEditorKeyUpFn: function(instance) { function doEditorKeyUp(e) { var r = true; if (!e) { e = window.event; } instance.editorKeyUpFn(e); } return doEditorKeyUp; }, /** * @class TextEditor * * @function getEditorLineHeight * Returns the font size of the editor in pixels. * * @param void * * @return number * The font size in pixels. */ getEditorLineHeight: function() { if (this.editorLineHeight < 0 && this.editorLineHeight != null) { this.editorLineHeight = parseFloat(this.getComputedStyle(this.editor, 'fontSize')) * 1.25; } return this.editorLineHeight; }, /** * @class TextEditor * * @function getLineEndPosition * Returns the position of the end of the current line of text. A line * of text ends with a newline character or the end of the string. * * @param str (string, required) * The string in which to find the beginning of the text line. * * @param position (integer, required) * The position at which to start searching. * * @return integer * Position at which the line ending was found. */ getLineEndPosition: function(str, position) { var curPos = position; var strEnd = str.length; var curChar = str.charAt(curPos); if (curPos >= strEnd) { return strEnd; } else if (curChar === '\n' || curChar === '\r') { return curPos; } else { while (curPos < strEnd) { curChar = str.charAt(curPos); if (curChar === '\n' || curChar === '\r') { return curPos; } curPos++; } return curPos; } }, /** * @class TextEditor * * @function getLineStartPosition * Returns the position of the beginning of the current line of text. A * line of text begins with a non-newline character. * * @param str (string, required) * The string in which to find the beginning of the text line. * * @param position (integer, required) * The position at which to start searching. * * @return integer * Position at which the line beginning was found. */ getLineStartPosition: function(str, position) { var curPos = position; var lineStartPos = 0; var curChar = str.charAt(curPos); if (curPos < 1) { lineStartPos = 0; } else if (curChar === '\n' || curChar === '\r') { curPos--; } while (curPos > 0) { curChar = str.charAt(curPos); if (curChar === '\n' || curChar === '\r') { lineStartPos = curPos + 1; break; } curPos--; } if (curPos < 1) { lineStartPos = 0; } return lineStartPos; }, /** * @class TextEditor * * @function getSelectedText * Gets the text currently selected in the editor. * * @param void * * @return string * The selected text, or empty string of not text is selected. */ getSelectedText: function() { if (this.editor.selectionStart < this.editor.selectionEnd) { return this.editor.value.substring(this.editor.selectionStart, this.editor.selectionEnd); } else { return ''; } }, /** * @class TextEditor * * @function insertClosedEmptyTag * Use the highlighted text as the tag name for an empty element closed * XHTML-style, i.e. "br" becomes "<br />". * * @param void * * @return void */ insertClosedEmptyTag: function() { var start = this.editor.selectionStart; var tag = this.getSelectedText(); this.insertText('<' + tag + ' />', null, null, false); this.editor.selectionStart += tag.length + 1; this.editor.selectionEnd = this.editor.selectionStart; }, /** * @class TextEditor * * @function insertCloseTag * Use the highlighted text as a closing HTML tag. * * @param void * * @return void */ insertCloseTag: function() { var start = this.editor.selectionStart; var tag = this.getSelectedText(); if (this.editorMode === 'HTML' && this.capitalizeTagNames) { tag = tag.toUpperCase(); } this.insertText('</' + tag + '>', null, null, false); this.editor.selectionStart += tag.length + 3; this.editor.selectionEnd = this.editor.selectionStart; }, /** * @class TextEditor * * @function insertOpenCloseTags * Use the highlighted text as the opening and closing HTML tags. * * @param void * * @return void */ insertOpenCloseTags: function() { var tagStr = this.createTag(this.getSelectedText()); var cursorIndex = tagStr.indexOf('|'); var start = this.editor.selectionStart; tagStr = tagStr.replace('|', ''); this.insertText(tagStr, null, null, false); this.editor.setSelectionRange(start + cursorIndex, start + cursorIndex); }, /** * @class TextEditor * * @function insertOpenTag * Use the highlighted text as the opening tag. * * @param void * * @return void */ insertOpenTag: function() { var start = this.editor.selectionStart; var tag = this.getSelectedText(); if (this.editorMode === 'HTML' && this.capitalizeTagNames) { tag = tag.toUpperCase(); } this.insertText('<' + tag + '>', null, null, false); this.editor.setSelectionRange(this.editor.selectionStart + tag.length + 1, this.editor.selectionStart); }, /** * @class TextEditor * * @function insertText * Inserts the given text at the cursor in the editor text box. If text * is selected in the editor, the selected text is replaced by the * string given here. * * @param str (string, required) * The text to be inserted. * * * @param start (integer, optional) * Index number in the string at which to start inserting text. * * @param end (integer, optional) * Index number of the end of the selection * * @return void */ insertText: function(str, start, end, setCursor) { var allText = this.editor.value; var allTextPrefix = ''; var allTextSuffix = ''; var scrollTop = this.editor.scrollTop; if (start == null) { var start = this.editor.selectionStart; } if (end == null) { var end = this.editor.selectionEnd; } if (setCursor == null) { var setCursor = true; } if (start > 0) { allTextPrefix = allText.substring(0, start); } if (end < allText.length) { allTextSuffix = allText.substring(end, allText.length); } this.editor.value = allTextPrefix + str + allTextSuffix; if (setCursor) { // If text was selected, reselect the inserted text if (start == end) { start = end = start + str.length; } else { end = start + str.length; } this.editor.setSelectionRange(start, end); } // Hack so Gecko browsers don't scroll to top after text is inserted if (this.editor.scrollTop === 0 && this.editor.scrollHeight > this.editor.clientHeight) { if (str.indexOf('\n') > -1) { this.editor.scrollTop = scrollTop + this.getEditorLineHeight(); } else { this.editor.scrollTop = scrollTop; } } }, /** * @class TextEditor * * @function nl2br * Converts all newline characters to <br> tags * * @param str (string, required) * The string in which all \n are replaced with <br> * * @param br (string, optional) * The <br> tag to use. If this is left off, then it will auto-create * the <br> tag taking XHTML compatibility into account, and capitalizing * the tag name if need be. * * @return string * The string with newlines converted to <br> tags */ nl2br: function(str, br) { if (!br) { var br = '<br' + (this.editorMode === 'XHTML' ? ' />' : '>'); } if (str !== '') { return str.replace(/\n/g, br+'\n'); } else { return ''; } }, /** * @class TextEditor * * @function nl2p * Converts double newlines into paragraphs and single newlines into * <br> tags. * * @param str (string, required) * The string in which to insert the <p> and <br> tags. * * @return string * The string with the <p> and <br> tags inserted. */ nl2p: function(str) { var paragraphs = []; var br = '<br' + (this.editorMode === 'XHTML' ? ' />' : '>'); var i = 0; var end = 0; if (typeof(str) === 'string' && str.length > 0) { paragraphs = str.split('\n\n'); end = paragraphs.length; while (i < end) { if (paragraphs[i] !== '') { paragraphs[i] = this.createTag('p').replace('|', this.nl2br(paragraphs[i], br)); } else { paragraphs[i] = this.createTag('p').replace('|', '&nbsp;'); } if (i < end - 1) { paragraphs[i] += '\n\n'; } i++; } str = paragraphs.join(''); } else { str = ''; } return str; }, /** * @class TextEditor * * @function repeatChars * Creates the tab stop when you hit tab. * * @param numChars (integer, required) * Number of characters to repeat. * * @param ch (string, optional) * The character or string to repeat. Default is a keyboard space. * * @return string * The tab stop measured in number of spaces. */ repeatChars: function(numChars, ch) { var i = 0; var str = ''; if (!ch) { ch = ' '; } while (i < numChars) { str += ch; i++; } return str; }, /** * @class TextEditor * * @function selectCurrentLine * Selects the current line of text in the editor. * * @param void * * @return void */ selectCurrentLine: function() { var start = this.getLineStartPosition(this.editor.value, this.editor.selectionStart); var end = this.getLineEndPosition(this.editor.value, this.editor.selectionEnd); this.editor.setSelectionRange(start, end) }, /** * @class TextEditor * * @function setFocus * Sets focus to the code editor. * * @param void * * @return void */ setFocus: function() { this.editor.focus(); }, /** * @class TextEditor * * @function tab2Tabstop * Turns tabs into numbers of spaces equal to the tab stop. * * @param str (string, required) * The string to replace tabs with tab stops. * * @return string * The string with tabs replaced with tab stops. */ tab2Tabstop: function(str) { var tabStopStr = this.repeatChars(this.tabStop); return str.replace(/\t/g, tabStopStr); }, /** * @class TextEditor * * @function tabify * Replaces numbers of spaces equal to the tab stop with tab characters. * * @param void * * @return void */ tabify: function() { var selText = this.getSelectedText(); var start = this.editor.selectionStart; selText = this.tabstop2Tab(selText); this.insertText(selText, null, null, false); this.editor.setSelectionRange(start, start + selText.length); this.setFocus(); }, /** * @class TextEditor * * @function tabify * Turns numbers of spaces equal to the tab stop with tab characters. * * @param str (string, required) * The string to replace tab stops with tabs. * * @return string * The string with tab stops replaced with tabs. */ tabstop2Tab: function(str) { var tabStopStr = this.repeatChars(this.tabStop); return str.replace(new RegExp(tabStopStr, 'g'), '\t'); }, /** * @class TextEditor * * @function unescape * Unescapes the text selected in the editor. * * @param void * * @return void */ unescape: function() { var escapeText = this.getSelectedText(); var start = this.editor.selectionStart; escapeText = this.unescapeHTML(escapeText); this.insertText(escapeText, null, null, true); }, /** * @class TextEditor * * @function unescapeHTML * Converts escaped special characters back to HTML. * * @param str (string, required) * The string to unescape. * * @return string * The unescaped string. */ unescapeHTML: function(str) { str = str.replace(/&gt;/g, '>'); str = str.replace(/&lt;/g, '<'); str = str.replace(/&amp;/g, '&'); return str; } };

Implementing the TextEditor

Save the JavaScript code above as TextEditor.js and include it in the HEAD of any page you want JavaScript enhanced TEXTAREA's.

<script type="text/javascript"
src="TextEditor.js"></script>

Next, you will need a TEXTAREA:

<textarea name="body" cols="65" rows="20"
id="body_source"></textarea>

Lastly, you'll need a bit of JavaScript in the HEAD of your HTML document to get things rolling:

<script type="text/javascript">
window.onload = function() {
window.CodeEditor = new TextEditor("body_source");
};
</script>

You can then access that instance of the TextEditor with the global JavaScript variable CodeEditor.

alert(CodeEditor.version);

Future development of TextEditor

In stock for the first full release, version 1.0, is support for Mac OS and Linux. Next up for version 2.0 is support for Internet Explorer 5.5 and newer. I will also be writing an add-on class to create a user interface for TextEditor, which will create a semi-WYSIWYG interface. Think the point and click BB Code editors you see in popular forum software, meets Dreamweaver — and all in your Web browser. Since the basic functionality of the code editor is separate from the user interface, you can have just the code editor, or a full-blown point and click code editor. Upcoming features are:

• Mac OS and Linux browser support
• Internet Explorer support
• Point and click user interface to assist coding
• Full documentation
• Downloadable JavaScript files: Uncompressed with documentation, uncompressed without documentation, packed, obfuscated, and both packed and obfuscated.
• Live preview. Will not require AJAX.

Who can use TextEditor

This script is released under the LGPL license and is free for commercial and non-commercial use. This is still in development so check back again for updates. Any updates to this script will be posted on this blog post.