/    Sign up×
Community /Pin to ProfileBookmark

Help Inserting at Caret in <textarea>

Hello everyone, I’m trying to write a very crude BBCode insertion script on my site. I’m definitely not great with JavaScript I am currently having trouble getting a couple scripts I found on the internet to work together. By themselves, they seem okay, but I think I messed something up when I tried to put them together. Can someone please take a look at this script and tell me why nothing happens when I visit the page and test it? It currently does not work in any browser. Thank you for your time.

Javascript:

[CODE]function addtag(tag) {
if (TextAreaContent.createTextRange && TextAreaContent.caretPos) {
var caretPos = TextAreaContent.caretPos;
caretPos.text = ‘[‘+tag+’]’+caretPos.text+'[/’+tag+’]’;
} else {
var txt = document.getElementById(‘message’);
txt.value = (txt.value).substring(0, txt.selectionStart) + “[“+tag+”]” + (txt.value).substring(txt.selectionStart, txt.selectionEnd) + “[/”+tag+”]” + (txt.value).substring(txt.selectionEnd, txt.textLength);
}
return;
}
function storeCaret(TextAreaContent) {
if (TextAreaContent.createTextRange) TextAreaContent.caretPos = document.selection.createRange().duplicate();
}[/CODE]

HTML:

[CODE]
<input type=”button” value=”b” onclick=”addtag(‘b’)” /><br />
<textarea name=”message” id=”message” rows=”15″ cols=”76″ onselect=”storeCaret(this);” onclick=”storeCaret(this);” onkeyup=”storeCaret(this);”></textarea>[/CODE]

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@arfaAug 18.2008 — Hi,

I am working on the same issue and am also not a .js coder so can't really debug your example but thought to share my solution with you.

It works just fine with the exception that the textarea scrolls to the top on insertion - although the caret remains in the correct place after insertion, as it does in this forum.

codingforums.com/ has the no-jump solution in their forum but as yet I have no reply from them.

Try this. I hope it helps:
[CODE]<html><head>
<title>Get/Set Caret in Textarea Example</title>
<script>
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.collapse(true);
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;}}
</script>

</head><body>
<BR><BR>

<form method=POST name=REPLYFORM action=style_page.php?act=save>
<a class=but href="javascript:format0('<B>', '</B>', 'BOLD');">BOLD</a>
<P>
<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>

</form>
</body></html>[/CODE]
Copy linkTweet thisAlerts:
@TusserteauthorAug 19.2008 — Thanks, but I was kind of hoping I could get help with the script I had posted as it is more understandable and easier for me to use in the future. Does anyone else have a solution?
Copy linkTweet thisAlerts:
@TusserteauthorAug 20.2008 — Does anyone have any idea? I could really use some help!
Copy linkTweet thisAlerts:
@TusserteauthorAug 21.2008 — I guess I'll just use the other script until I can get some help on here. I would still love to hear what anyone has to say!
×

Success!

Help @Tusserte spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...