<script>
function addText(event){
document.getElementById("insertid").value +=
(event.srcElement || event.target).firstChild.nodeValue.toString();
}
</script>
<textarea id="inserid"></textarea>
<table onclick=addText(event)><tr><td>[bbcode][/bbcode]</td><td>[bbcode2][/bbcode2]</td></tr></table>

problem is whe i click on the bbcode or bbcode2 it inserts it at the end of whatever is in the textarea. im looking to insert it into where the user clicks(where the carat is)
like if a user entered in the textearea:

hey whats up

and the carrot was after hey then when they click the bbcode it enteres it as

hey[bbcode][/bbcode] whats up

how do i do that?

Recommended Answers

This is because you are appending the new value always. You have to get the position of the carrot and do some string operation. here is a function to insert in between:-
(http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript)

function insertAtCursor(myField, myValue) {

  //IE support

  if (document.selection) {

    myField.focus();

    sel = …
Jump to Post

here:

<script>
function addText(event){
//document.getElementById("insertid").value +=
//(event.srcElement || event.target).firstChild.nodeValue.toString();
insertAtCursor(document.getElementById("insertid"), (event.srcElement || event.target).firstChild.nodeValue.toString())
}
</script>
<textarea id="inserid"></textarea>
<table onclick=addText(event)><tr><td>[bbcode][/bbcode]</td><td>[bbcode2][/bbcode2]</td></tr></table>
Jump to Post

Is there any javascript error?

Jump to Post

All 10 Replies

This is because you are appending the new value always. You have to get the position of the carrot and do some string operation. here is a function to insert in between:-
(http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript)

function insertAtCursor(myField, myValue) {

  //IE support

  if (document.selection) {

    myField.focus();

    sel = document.selection.createRange();

    sel.text = myValue;

  }

  //MOZILLA/NETSCAPE support

  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);

  } else {

    myField.value += myValue;

  }

}

// calling the function

insertAtCursor(document.formName.fieldName, 'this value');

oh ok i understand ehoug to apply the function code to the page above the function gets called but where in my script exactly do i make sure i call the functionald?

here:

<script>
function addText(event){
//document.getElementById("insertid").value +=
//(event.srcElement || event.target).firstChild.nodeValue.toString();
insertAtCursor(document.getElementById("insertid"), (event.srcElement || event.target).firstChild.nodeValue.toString())
}
</script>
<textarea id="inserid"></textarea>
<table onclick=addText(event)><tr><td>[bbcode][/bbcode]</td><td>[bbcode2][/bbcode2]</td></tr></table>

here:

<script>
function addText(event){
//document.getElementById("insertid").value +=
//(event.srcElement || event.target).firstChild.nodeValue.toString();
insertAtCursor(document.getElementById("insertid"), (event.srcElement || event.target).firstChild.nodeValue.toString())
}
</script>
<textarea id="inserid"></textarea>
<table onclick=addText(event)><tr><td>[bbcode][/bbcode]</td><td>[bbcode2][/bbcode2]</td></tr></table>
<script>
function addText(event){
//document.getElementById("insertid").value +=
//(event.srcElement || event.target).firstChild.nodeValue.toString();
insertAtCursor(document.getElementById("insertid"), (event.srcElement || event.target).firstChild.nodeValue.toString())
}
</script>
<textarea id="insertid"></textarea>
<table onclick=addText(event)><tr><td>[bbcode][/bbcode]</td><td>[bbcode2][/bbcode2]</td></tr></table>

doesnt work for some reason. i dont know why.

Is there any javascript error?

I think calling of addText() on click is not correct.

how am i supposed to call it? on hover or something?
well i treid

onclick="addText()" and it still didnt work
<table id='my_table'><tr><td>[bbcode][/bbcode]</td><td>[bbcode2][/bbcode2]</td></tr></table>

Now on body on load bind the 'onclick' event this way

The body html:

<script>
function init() {
    var table = document.getElementById('my_table');
    if(table) {
        table.onclick = function(e) {
            // Now call your addText function
            addText(e);
        }
    }
}
</script>
<body onload='init();'></body>

Hope you got all that.

Note there are better way to bind events please have a look at 'addEventListener()' javascript function

still does not even insert [bbcode][bbcode] into textarea, much less where the carot is

Thanks it works
But if some text is selected it get replaced
After insertion cursor moves to the end
How to make cursor remain between the inserted tag like this

[bbcode]cursore should remain here[/bbcode]
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.