add text onclick to textarea where carot is

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Apr 2009
Posts: 290
Reputation: SKANK!!!!! is an unknown quantity at this point 
Solved Threads: 2
SKANK!!!!!'s Avatar
SKANK!!!!! SKANK!!!!! is offline Offline
Posting Whiz in Training

add text onclick to textarea where carot is

 
0
  #1
Nov 8th, 2009
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <script>
  2. function addText(event){
  3. document.getElementById("insertid").value +=
  4. (event.srcElement || event.target).firstChild.nodeValue.toString();
  5. }
  6. </script>
  7. <textarea id="inserid"></textarea>
  8. <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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. hey whats up
and the carrot was after hey then when they click the bbcode it enteres it as
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. hey[bbcode][/bbcode] whats up

how do i do that?
Last edited by SKANK!!!!!; Nov 8th, 2009 at 5:08 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz
 
0
  #2
Nov 8th, 2009
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/...ing-javascript)

javascript Syntax (Toggle Plain Text) 
  1. function insertAtCursor(myField, myValue) {
  2.  
  3.   //IE support
  4.  
  5.   if (document.selection) {
  6.  
  7.     myField.focus();
  8.  
  9.     sel = document.selection.createRange();
  10.  
  11.     sel.text = myValue;
  12.  
  13.   }
  14.  
  15.   //MOZILLA/NETSCAPE support
  16.  
  17.   else if (myField.selectionStart || myField.selectionStart == '0') {
  18.  
  19.     var startPos = myField.selectionStart;
  20.  
  21.     var endPos = myField.selectionEnd;
  22.  
  23.     myField.value = myField.value.substring(0, startPos)
  24.  
  25.                   + myValue
  26.  
  27.                   + myField.value.substring(endPos, myField.value.length);
  28.  
  29.   } else {
  30.  
  31.     myField.value += myValue;
  32.  
  33.   }
  34.  
  35. }
  36.  
  37. // calling the function
  38.  
  39. insertAtCursor(document.formName.fieldName, 'this value');
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 290
Reputation: SKANK!!!!! is an unknown quantity at this point 
Solved Threads: 2
SKANK!!!!!'s Avatar
SKANK!!!!! SKANK!!!!! is offline Offline
Posting Whiz in Training
 
0
  #3
Nov 9th, 2009
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?
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz
 
0
  #4
Nov 10th, 2009
here:

html Syntax (Toggle Plain Text) 
  1. <script>
  2. function addText(event){
  3. //document.getElementById("insertid").value +=
  4. //(event.srcElement || event.target).firstChild.nodeValue.toString();
  5. insertAtCursor(document.getElementById("insertid"), (event.srcElement || event.target).firstChild.nodeValue.toString())
  6. }
  7. </script>
  8. <textarea id="inserid"></textarea>
  9. <table onclick=addText(event)><tr><td>[bbcode][/bbcode]</td><td>[bbcode2][/bbcode2]</td></tr></table>
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 290
Reputation: SKANK!!!!! is an unknown quantity at this point 
Solved Threads: 2
SKANK!!!!!'s Avatar
SKANK!!!!! SKANK!!!!! is offline Offline
Posting Whiz in Training
 
0
  #5
Nov 11th, 2009
•
•
•
•
Originally Posted by Luckychap View Post
here:

html Syntax (Toggle Plain Text) 
  1. <script>
  2. function addText(event){
  3. //document.getElementById("insertid").value +=
  4. //(event.srcElement || event.target).firstChild.nodeValue.toString();
  5. insertAtCursor(document.getElementById("insertid"), (event.srcElement || event.target).firstChild.nodeValue.toString())
  6. }
  7. </script>
  8. <textarea id="inserid"></textarea>
  9. <table onclick=addText(event)><tr><td>[bbcode][/bbcode]</td><td>[bbcode2][/bbcode2]</td></tr></table>
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  <script>
  2. function addText(event){
  3. //document.getElementById("insertid").value +=
  4. //(event.srcElement || event.target).firstChild.nodeValue.toString();
  5. insertAtCursor(document.getElementById("insertid"), (event.srcElement || event.target).firstChild.nodeValue.toString())
  6. }
  7. </script>
  8. <textarea id="insertid"></textarea>
  9. <table onclick=addText(event)><tr><td>[bbcode][/bbcode]</td><td>[bbcode2][/bbcode2]</td></tr></table>
doesnt work for some reason. i dont know why.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz
 
0
  #6
Nov 11th, 2009
Is there any javascript error?
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz
 
0
  #7
Nov 11th, 2009
I think calling of addText() on click is not correct.
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 290
Reputation: SKANK!!!!! is an unknown quantity at this point 
Solved Threads: 2
SKANK!!!!!'s Avatar
SKANK!!!!! SKANK!!!!! is offline Offline
Posting Whiz in Training
 
0
  #8
Nov 11th, 2009
how am i supposed to call it? on hover or something?
well i treid
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. onclick="addText()" and it still didnt work
Last edited by SKANK!!!!!; Nov 11th, 2009 at 9:20 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz
 
0
  #9
Nov 11th, 2009
html Syntax (Toggle Plain Text) 
  1. <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:
html Syntax (Toggle Plain Text) 
  1. <script>
  2. function init() {
  3.     var table = document.getElementById('my_table');
  4.     if(table) {
  5.         table.onclick = function(e) {
  6.             // Now call your addText function
  7.             addText(e);
  8.         }
  9.     }
  10. }
  11. </script>
  12. <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
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 290
Reputation: SKANK!!!!! is an unknown quantity at this point 
Solved Threads: 2
SKANK!!!!!'s Avatar
SKANK!!!!! SKANK!!!!! is offline Offline
Posting Whiz in Training
 
0
  #10
Nov 11th, 2009
still does not even insert [bbcode][bbcode] into textarea, much less where the carot is
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
ajax ajaxexample ajaxjspservlets array autoplay blackjack browser captchaformproblem checkbox child class close codes date debugger dependent developer disablefirebug dom editor element embed engine events explorer ext file firefox flash form forms game gears getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl maps marquee masterpage math matrixcaptcha media mysql object onerror onmouseoutdivproblem onreadystatechange parent passing paypal pdf php player position post programming rated redirect runtime safari scriptlets scroll search security session shopping size software solutions star stars stretch synchronous toggle tweet unicode variables web webkit webservice window wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC