Hey all....
Basically, what I want to do is simple:
Upon hitting a button, some text is inserted where the caret is focused (if at all) in the textarea. Much like inserting smileys.....
So I came up with this:
<body>
<div id="wrapper">
<div id="content">
<div class="article">
<div class="main">
<form action="admin/add.php" method="post" style="float: left;" name="add" id="add">
Insert: <a href="javascript:void(0);" type="button" style="border: 1px solid #000; background-color: #ccc; color: #000;" onclick="insertAtCursor('<![ PAGE BREAK ]!>', 'document.forms.add.aBody'); return false;">Page Break</a><br />
<textarea name="aBody" rows="15" cols="80"></textarea><br /><br />
<input type="submit" name="submit" value="Add" /> <input type="reset" name="reset" value="Reset Fields" />
</form>
</div>
</div>
</div>
And the corresponding JavaScript (from SMF):
function insertAtCursor(text, textarea)
{
if(typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
var caretPos = textarea.caretPos;
caretPos.text = caretPos.checkAt(caretPost.text.length - 1) == ' ' ? text + ' ' : text;
caretPos.select();
}
else if(typeof(textarea.selectionStart) != "undefined")
{
var begin = textarea.value.substr(0, textarea.selectionStart);
var end = textarea.value.substr(textarea.selectionEnd);
var scrollPos = textarea.scrollTop;
textarea.value = begin + text + end;
if(textarea.setSelectionRange)
{
textarea.focus();
textarea.setSelectionRange(begin.length + text.length, begin.length + text.length);
}
textarea.scrollTop = scrollPos;
}
else
{
textarea.value += text;
textarea.focus(textarea.value.length - 1);
}
}
Now, I always get an error on the last textual line:
textarea.focus(textarea.value.length - 1);
saying that textarea.value.length is null or not an object, or isn't set.
I'm not seeing why.... perhaps someone can help me out....
