ansaurus

Question

Jquery: a div that contains the value of a textarea, when i click on a word in the div, make it click there in the textarea.

Answer 1

A:

" emulate the click on the same word at the same point in the textarea "

I guess its difficult to capture the exact position of the text in textarea, but you can do some thing below ( though it doesn't met your requirement ) . please Try to understand. I feel this is difficult 'cause, just clicking on some text in a <div /> tag doesn't give the offset position of the Word. If you're going to select some text in div, may be this post helps.

But I'd like to learn if it is possible using just a .click()

If some one comes up with a cool thought, it would be more helpful =)

HTML :

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<meta charset=utf-8 />
<title>Avinash</title>

<style>
  #input , #output { margin: 20px;width:300px;height:200px; border:1px solid #000; font 15px Arial; }
  #output {overflow:scroll;float:left; font:bold 14px verdana; color : #0099b9; }
</style>
</head>
<body>
  <table>
    <tr>
      <td>
        <textarea id="input" >Type your Text </textarea>
      </td>
      <td>
        <div id="output" > </div>
      </td>
    </tr>
  </table>
  </span>
</body>
</html>

JavaScript :

   $(function() {
      $('#input').one('focus',function() {
          $(this).val('');
      }).bind('keyup',function() {
        $('#output').text($(this).val());
      });

      $('#output').bind('click',function() {
        alert('focusing Textarea');
        $('#input').focus();
      });
    });

you can Test the above Code here : http://jsbin.com/atuqo4

Ninja Dude 2010-09-19 17:03:16

i'm trying to create an extremely simple wysiwyg text editor, with only the ability to add bold, italic, links, and blockquotes. i thought this would be the way they did it, since a textarea wont display styls like bold or italic, or so i've heard. do you know if this is how they do it or...?

android.nick 2010-09-19 23:13:19

you mean, you want to render the output in `div` tag or in Textarea, If you're aiming at your output in div tag, I beleive it could be done, but i'm not sure about textarea

Ninja Dude 2010-09-20 05:49:08

render the output in the div, i was thinking, make the div and the textarea the exact same in font size and everything, so when you type in the textarea, it aligns perfectly with the div. then have jquery wrap each word in the div with a <span> so you can get the X Y position of that word, then have each word that has some kind of font style, example: italics, bold, etc. have those words grabbed and overlayed over the textarea using the X Y coordinates, the rest i'm sure i could figure out later, but what do you think? So i would only be positioning the styled words/links, not the rest. yeah?

android.nick 2010-09-20 10:28:48

You could grab the textareas top and left coordinates and position each word from there, so that it would perfectly overlay the textarea. It would take me awhile to get this coordinates grabbing/placing figured out since i've never really done anything with coordinates, if you have time that'd be neat to see if it works, if not, thanks anyways.

android.nick 2010-09-20 10:32:30

ansaurus

tags:

views:

answers:

Jquery: a div that contains the value of a textarea, when i click on a word in the div, make it click there in the textarea.

related questions