Member Avatar for SKANK!!!!! 
<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?

Edited by SKANK!!!!! because: n/a
  • 3 Contributors
  • 10 Replies
  • 167 Views
  • 11 Months Discussion Span
  • Latest Post Latest Post by lifeh2o
Member Avatar for Luckychap

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');
Member Avatar for SKANK!!!!!

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?

Member Avatar for Luckychap

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>
Member Avatar for SKANK!!!!!

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.

Member Avatar for Luckychap

Is there any javascript error?

Member Avatar for Luckychap

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

Member Avatar for SKANK!!!!!

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

onclick="addText()" and it still didnt work
Edited by SKANK!!!!! because: n/a
Member Avatar for Luckychap 
<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

Member Avatar for SKANK!!!!!

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

Member Avatar for lifeh2o

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]
Edited by lifeh2o because: n/a
Be a part of the DaniWeb community

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