1

I have two textareas. TA1 which is for styling/display, and TA2 which is for input capture and the ability to place the caret over a span tag. They will always have the same value, but TA1 will contain additional html for styling.

TA1 is overlayed by TA2. Basically, if the textarea is clicked, then TA2 receives the event.

I am trying to select an element in TA1 based off the cursor position in TA2. I know the range of the word that was clicked in TA2, but need to select the appropriate span in TA1. Basically, I need to click through TA2 and trigger the handler in TA1.

I have been trying to see if it's possible to place the caret immediately after the span in TA1, and select the previous span, but so far I have not had any success.

Here is an example of the text within TA1,

<textarea>
<span class=\"suggestion\" title=\"Click to edit\">TESTP</span>\n
    \n
    123\n
    \n
    TESTING\n
    \n
    123\n
    \n
    <span class=\"suggestion\" title=\"Click to edit\">TESTP</span>  
</textarea>

The above html will be rendered into the following..

Textarea

For example, if I clicked the first "TESTP" I would have a range of 0-4. Is there a way to select the span tag if I placed the caret at position 5 on TA1? I will be trying to see if I can accomplish this using a filter as well but would like to see if anyone has any other suggestions.

I went ahead and created a rough idea of what I am trying to accomplish in this jsFiddle, please note that the textArea on the right is there to display the click handler I am trying to trigger. It works because there isn't another layer above it. The textArea on the left, is where I am currently at.

Kevin
  • 2,752
  • 1
  • 24
  • 46
  • does your code already capture the work selected? Be best if you created a demo in jsfiddle.net with code you currently have – charlietfl Jan 05 '13 at 03:04
  • @charlietfl Did you mean word when you said work? My code currently captures the word that was clicked on TA2. I just need to figure out how to trigger a click on the corresponding span element in TA1. Good point, I will make a jsfiddle when I get back to work after the weekend. – Kevin Jan 05 '13 at 03:14
  • yes..meant word...was a typo. SHould have demo with question for faster response... `get the span` is a bit abstract without seeing how it works – charlietfl Jan 05 '13 at 03:16
  • Please see my [**two jsFiddles in the Questions comment section**](http://stackoverflow.com/questions/11250378/how-can-i-wrap-the-previous-current-and-next-word-inside-a-tag-using-jquery#comment14940364_11250378) for this [SO Question](http://stackoverflow.com/q/11250378/1195891). Activate your browsers console when your looking at those. Also, jsFiddle is having issues today. Cheers! – arttronics Jan 05 '13 at 09:35
  • Also, since your using two textareas, I have this [**SO Answer**](http://stackoverflow.com/a/11516862/1195891) that is used for transparent fonts but leaving the text-caret visible. – arttronics Jan 05 '13 at 09:41
  • @arttronics I ended up having to do some string manipulation to find the correct span. It may not be the best way, but it works. If you want to post an answer I will accept it since the links in your comment eventually led me to my current solution. Thanks – Kevin Jan 08 '13 at 21:13
  • @Kevin, please create your own answer based on your recent comment. In your answer show your simple code that works for your workaround. Then, Accept your answer as the solution your using. I'll upvote it. Cheers! – arttronics Jan 08 '13 at 22:04

1 Answers1

0

This was solved by researching the following SO items and updating the handler's logic.

how-can-i-wrap-the-previous-current-and-next-word-inside-a-tag-using-jquery

how-to-have-transparent-fonts-except-for-the-text-caret-in-a-textarea

Community
  • 1
  • 1
Kevin
  • 2,752
  • 1
  • 24
  • 46