Matthew Knott

After spending some time today looking into ways to insert HTML tags into textareas on iPhone, I decided to knock up a quick editor for this site based around the insert at cursor position model as discussed in the previous article.

This post is the first real test of it's function. The biggest problem is scrolling up and down the textarea, it's extremely difficult.

To accentuate the positives however, it can insert the tags I mainly use, such as paragraph, bold, and code. Also it's better than typing it manually. I'm going to try using a two finger scroll to move the textarea.

Roll on firmware 2.0 and the copy and paste feature. For now though, here's how it's done.

function insertAtCursor(myField, myValue) {

if (myField.selectionStart || myField.selectionStart == '0') {

var startPos = myField.selectionStart;

var endPos = myField.selectionEnd;

myField.value = myField.value.substring(0, startPos)

+ myValue

+ myField.value.substring(endPos, myField.value.length);

} else {

myField.value += myValue;

}

}

To call the function, I pass in a reference to my textarea object, followed by the text to insert.

<span onClick="insertAtCursor(document.getElementById('articleBody'), '<p></p>');">P</span>

Tags: Javascript iPhone Content Rich Text Editor Textarea Function