on click add text at I beam in a input filed

[zeroradius]

Hey guys, I am working on BB code for my site. When a user clicks a button I need it to add bb code to the text box at the I beam, or if a section of text is highlighted wrap the text in the tags (basicly I want it to work like every other forum on the net). Every time I google this it says it can't be done.

Can anyone tell me how to achive this, maybe I am trying to use the wrong language?

Note: My site uses PHP & MySQL so if I have to use another language I need it to work well with it.

[Brandon W]

I can't think of the opposite to append but that's what you want to do. When the user clicks on the button, you want to find the text in the text field and append the bbcode to it. As for the highlighting I'm not to sure sorry but I did find this link that should help you a bit;
Neowin Forums > [JavaScript] Appending text to an HTML Textbox

EDIT:
Another handy link;
Java Script Tutorial - innerHTML

[zeroradius]

So I parse the data at the spot where the I beam is then add in the bb code and concantinate it back together? hmmmm , I need to figure out how to break it apart then. The only parsing i have done is in php with explode() which would not work here. I am going to look into it in JS and check out those links. Thanks Brandon. I will probably be posting back here thou, I have never done JS other than popups -_-

Oh and how does JS know were the I beam is?

[Brandon W]

Yes, that should work. Ummm I believe that JS would offer something like that but I haven't really done much JS.

It's all good, I will continue to Google till I find the answer you are looking for unless someone that knows posts. I did a search on that but I can't think of the name for the beam you are talking about. I tried i-beam, beam, text beam... Can't think of anything else.

[zeroradius]

Thanks brandon. It is called an I beam or a carrot. I have been yahooing it and can'tfind anything relevent eaither. I also checked the JS bible but it din't have it in there. The closest thing i found was somthing in IE that keeps track of the position but it would not work for any other browsers, I'm trying to make it work in IE,FF,and chrome

[Brandon W]

Only 4 comments on this script but from the looks of it, it should work;
JavaScript: Caret Index - ZeroSleep

This one doesn't look like it would work in IE according to the comments;
Vishal Monpara’s Blog Javascript : Getting and Setting Caret Position in Textarea

[zeroradius]

I checked out the example on the seconed one and it worked in IE , FF, and chrome. now that I have that I can figure out the rest of the code myself (i hope) Thanks a million. +Rep

[WingedPanther]

cursor is the technical name for the I-beam. Googling "javascript insert text at cursor" produced some promising results.

[zeroradius]

hmm, I could not find anything that made scence to me there WP. I thought maybe using that thing Brandon showed me with InsertAt() but that is a diffrent filetype wich means no .php

So I decided to cheat. I set up a yabb forum and I took there code that does what i am wanting to do. I am about to print it out and study it to see how it works.

Thanks Guys ^_^


Edit: bah to much code not enouph coments nor enouph meaningful veriable names, I fail

edit2: Haza. I can use a split like in this code

<script type="text/javascript">
var myString = "123456789";

var mySplitResult = myString.split("5");

document.write("The first element is " + mySplitResult[0]); 
document.write("<br /> The second element is  " + mySplitResult[1]); 
</script>

replace the value 5 with the number returned from the example in the secondlink of that post brandon made. that should work. Wont be able to test until tommorow cause I can't concentrate right now. but still it should work ^_^

[Brandon W]

I checked out the example on the seconed one and it worked in IE , FF, and chrome. now that I have that I can figure out the rest of the code myself (i hope) Thanks a million. +Rep

Welcome.

cursor is the technical name for the I-beam. Googling "javascript insert text at cursor" produced some promising results.

I was thinking of typing that in but I thought it might of come up with the position of the mouse cursor on the screen.

hmm, I could not find anything that made scence to me there WP. I thought maybe using that thing Brandon showed me with InsertAt() but that is a diffrent filetype wich means no .php

So I decided to cheat. I set up a yabb forum and I took there code that does what i am wanting to do. I am about to print it out and study it to see how it works.

Thanks Guys ^_^


Edit: bah to much code not enouph coments nor enouph meaningful veriable names, I fail

edit2: Haza. I can use a split like in this code

<script type="text/javascript">
var myString = "123456789";

var mySplitResult = myString.split("5");

document.write("The first element is " + mySplitResult[0]); 
document.write("<br /> The second element is  " + mySplitResult[1]); 
</script>

replace the value 5 with the number returned from the example in the secondlink of that post brandon made. that should work. Wont be able to test until tommorow cause I can't concentrate right now. but still it should work ^_^

Tell us how it goes, I don't know if that would be very efficient.