textarea problem

[orhun]

how can i find before/after parts of textarea? ($end & $begin)


function(name) {
var input = document.selection.createRange();
var rangeinput = input.text;

var begin = rangeinput.selectionStart;
var end = rangeinput.selectionEnd;

var input = document.formname.textareaname.value = begin + '[' + name + ']' + end;
}

whats wrong at this code?

[orhun]

im not selecting something in textarea(as like makeing "bold/italic").. the code must show before and after parts of where the mouse cursor is.

[djr33]

Do you mean where the typing cursor is? The mouse cursor is the arrow, and finding that location relative to the text box would be very difficult, if not impossible.
Sorry I don't have an answer. I'm curious myself about the best way to approach this.

[orhun]

i need begin & after parts in textarea..

for firefox: im doing like this..

var begin = formname.textareaname.value.substr(0, formname.textareaname.selectionStart);
var end = formname.textareaname.value.substr(formname.textareaname.selectionEnd);

but, this is not working on IE.

i need var begin & var end

[jscheuer1]

That's not how it works in IE. There is no begin and end, well there is, but that information is difficult or impossible to work with (readonly, if I'm remembering correctly, and given as pixel offsets, not as character offsets), and difficult to obtain (the MS documentation on it is not well organized, or perhaps too organized or fragmented). You may get the range and do stuff with it. If the range length is 0, insertion will occur at the point of the cursor. As I believe I mentioned before:

http://www.dynamicdrive.com/forums/showpost.php?p=211683&postcount=33

Shows the methods used. Reading the entire thread:

http://www.dynamicdrive.com/forums/showthread.php?p=211683#post211683

should give you a better idea. See also:

http://msdn.microsoft.com/en-us/library/ms535869(VS.85).aspx

Which will allow you to cast about in the MS library for related tidbits on the approach used by MS for IE as regards these and other text selection situations.

Generally what you want to do is to:


Focus on the element:
el.focus();

Get the selection and create a range from it:
curRng = document.selection.createRange();

Empty the selection (I've no idea why, but this seems to be required):
document.selection.empty();

Edit the text property of the range:
curRng.text = btag + curRng.text + etag;


Maintaining focus on the element throughout this process, and perhaps even removing focus from it (el.blur()) and then returning focus, may be required for optimal performance. The main thing is that we never get to see or use the the begin and end point, we get the range and edit its text property. This is done in my code referenced above (here with the non-IE parts removed), like so (as part of my editText object collection of functions):


saveCurRng: function(el){this.el = el; el.focus(); this.curRng = document.selection.createRange();},
insert: function(btag, etag){
this.el.focus();
document.selection.empty();
this.curRng.text = btag + this.curRng.text + etag;
this.el.blur();
this.el.focus();
},

If there is no selected text, insertion (btag, etag) will occur at the point of the cursor. If there is selected text, insertion will wrap the selection.

More on the TextRange Object created by:


. . . curRng = document.selection.createRange();

and it's properties can be found here:

http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx