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_问答_开发者

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

开发者 https://www.devze.com 2023-01-16 13:44 出处：网络

I have a div that contains the value of the textarea on keyup, so as i type in the textarea, it\'s shown in the div, the div is a comment preview for the textarea. is it possible to emulate a click in

I have a div that contains the value of the textarea on keyup, so as i type in the textarea, it's shown in the div, the div is a comment preview for the textarea. is it possible to emulate a click in the textare开发者_如何学Pythona when i click in the div? so if in the div i click on the word 'world' in the sentence 'hello world i am on you', then it would emulate the click on the same word at the same point in the textarea?

is there a way to do this with jquery?

" 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"></script>
<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