View Full Version : insert at cursor- maintain focus

08-14-2008, 03:01 PM
I have a newsletter CMS with a format bar.
I have JS to insert format code at the cursor point (see end of this post).

The problem is that, after the code is inserted the cursor is positioned at the end of the block of text.

How to maintain cursor focus at the point of insertion?

current insertion code...

function insertAtCursor(myField, myValue) {
if (document.selection) // I.E.
{ myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
else 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); myField.focus();}
else { myField.value += myValue; myField.focus(); }} // end insert cursor

thanks - kusalo

Philip M
08-14-2008, 07:59 PM
Have a look at:-


08-16-2008, 03:06 PM
This is so far the best lead I have found.
The working scenario I am after is not uncommon so I am surprised there is not a functional module about:
Click in the textarea, click a button (bold, smilies, etc) and the inserted text/code is inserted at the cursor position AND the cursor remains (blinking) at the end of the new insertion.

I have it working *but* when there is lots of text (ie. a scroll bar) on insertion the textarea jumps to the top of the box. Although the cursor retains position. This is confusing for the user.

The reply box for the 'codingforums.com' forum works just fine :)
How is it done?

I am not a .js coder so the following is a hack of several snippets and is perhaps a bit messy.

<title>Get/Set Caret in Textarea Example</title>
function insertAtCursor(myField, myValue) {
var val_length = myValue.length;
if (document.selection) { sel = document.selection.createRange(); // I.E.
sel.text = myValue;
ctrl.focus(); }
else if (myField.selectionStart || myField.selectionStart == '0') { // MOZILLA/NETSCAPE support
var startPos = myField.selectionStart;
myCursor = startPos + val_length;
var endPos = myField.selectionEnd; //alert(endPos);
myField.value = myField.value.substring(0, startPos)
+ myValue
+ myField.value.substring(endPos, myField.value.length);
setCaretPosition(document.getElementById('got'),myCursor); }
else { myField.value += myValue;
setCaretPosition(document.getElementById('got'),myCursor); }
} // end insert cursor

function doGetCaretPosition (ctrl) { var CaretPos = 0;
if (document.selection) { ctrl.focus (); // IE Support
var Sel = document.selection.createRange ();
Sel.moveStart ('character', -ctrl.value.length);
CaretPos = Sel.text.length; }
return (CaretPos); }

function setCaretPosition(ctrl, pos) { if(ctrl.setSelectionRange) { ctrl.focus();
ctrl.setSelectionRange(pos,pos); }
else if (ctrl.createTextRange) { var range = ctrl.createTextRange();
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select(); }}

function format0(format1, format2, format3) {
myCursor = doGetCaretPosition(document.getElementById('got'));
var text = prompt('Enter text to format: ' + format3);
if (text != null) {
insertAtCursor(document.REPLYFORM.get, format1 + text + format2);}
else {return;}}

<form method=POST name=REPLYFORM action=style_page.php?act=save>
<a class=but href="javascript:format0('<B>', '</B>', 'BOLD');">BOLD</a>
<textarea id="got" name="get" rows="2" cols="51">This is a small box to force the scroll bar so that the problem is quite apparent. It all works just fine and dandy but... and ain't there always a 'but' - as in butt in or butt out or butt er. Blah blah blah.</textarea>