Easily insert text at/surrounding selections

Just a quick 10-minute thing I whipped up out of boredom:
http://www.jasonkarldavis.com/textarea.html

In Mozilla, every textarea now has:

surroundSelection(leftstr, rightstr)

and insertAtSelection(str)

methods.

In IE, you need to explicitly give textareas those methods by:

ExtendTextArea(refToTextArea)

And now that textarea has those same methods.


I see this question asked enough that I thought it might be useful enough to post this.

nothing happens when you click the buttons in opera 6.0

scroots

when using the img button and there is no selection, the cursor just is between words, the img tag is inserted before the textarea. For the rest, very useful i think :thumbsup:

Originally posted by scroots
nothing happens when you click the buttons in opera 6.0

scroots

Even the Mozilla-method is proprietary. There is no current standard definition which specifies precisely how to obtain the position of the caret, and a user-selection.

Roelf, I've gotten that a few times too, but it typically works for me in IE. I only get that when the caret is at the end of the text. Like I said, this was a quick 10-minute thing. Ultimately, the IE-method is very susceptible to screwing up the page if the method is called and the selection is elsewhere on the page other than the textarea. I could compare the parentElement.tagName against 'TEXTAREA' I suppose to prevent that from happening... but the real flaw is in IE's handling of a selection when clicking on a button.

Are you sure of that, jkd? The Range specification states a blinking caret may be treated as a selection with starting and ending points identical.

Originally posted by Alex Vincent
Are you sure of that, jkd? The Range specification states a blinking caret may be treated as a selection with starting and ending points identical.

Of course. But, as I was saying, there is no specification which deals with accessing user-selections, whether or not they consist of anything.

In other words, there is no W3C-equivalent to window.getSelection().getRangeAt() or even window.getSelection()

Thanks for this code jkd, it's helped me with some stuff I'm working on.

Note: to get the parentElement of a TextRange in IE, you need the parentElement method

var range = document.selection.createRange();
if ( range.parentElement() != this ) return;
range.text = left + range.text + right;

Works for me :D

You've got to highlight text in order for the bold and italic stuff to work. It isn't html though. What is it, bb code? I have no knowledge on a 3rd party code. In fact if I did, I would make my signature be links, but how is that done when html is turned off in these forums?