Jquery: div, который содержит значение textarea, когда я нажимаю на слово в div, щелкаю там в textarea

У меня есть div, который содержит значение текстовой области при нажатии клавиши, поэтому, когда я набираю текстовую область, она отображается в div, div представляет собой предварительный просмотр комментария для текстовой области. Можно ли эмулировать щелчок в текстовом поле, когда я нажимаю в div? поэтому, если в div я нажму на слово «мир» в предложении «привет, мир, я на тебе», то это будет эмулировать щелчок на том же слове в той же точке в текстовой области?

есть ли способ сделать это с помощью jquery?


javascript jquery textarea wysiwyg
person android.nick    schedule 19.09.2010    source источник

Ответы (1)


arrow_upward
0
arrow_downward

" эмулировать щелчок по тому же слову в той же точке текстовой области "

Я предполагаю, что трудно зафиксировать точное положение текста в текстовом поле, но вы можете сделать кое-что ниже (хотя это не соответствует вашим требованиям). Пожалуйста, попытайтесь понять. Я чувствую, что это сложно, потому что простой щелчок по тексту в теге <div /> не дает смещения позиции Word. Если вы собираетесь выделить текст в div, это может быть post помогает.

Но я хотел бы узнать, возможно ли это, используя только .click()

Если кто-то придумает крутую мысль, будет полезнее =)

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();
      });
    });

вы можете протестировать приведенный выше код здесь: http://jsbin.com/atuqo4

person Community    schedule 19.09.2010
comment
Я пытаюсь создать чрезвычайно простой текстовый редактор wysiwyg, в котором можно только добавлять полужирный шрифт, курсив, ссылки и цитаты. я думал, что они так и сделают, поскольку текстовое поле не будет отображать стили, такие как полужирный или курсив, или так, я слышал. Вы знаете, так они это делают или...? - person android.nick; 20.09.2010
comment
вы имеете в виду, что вы хотите отобразить вывод в теге div или в текстовой области. Если вы нацелены на свой вывод в теге div, я верю, что это можно сделать, но я не уверен насчет textarea - person ; 20.09.2010
comment
визуализировать вывод в div, я думал, сделать div и текстовую область точно такими же по размеру шрифта и всему остальному, поэтому, когда вы вводите текстовую область, она идеально выравнивается с div. затем попросите jquery обернуть каждое слово в div с помощью ‹span›, чтобы вы могли получить позицию X Y этого слова, затем каждое слово имеет какой-либо стиль шрифта, например: курсив, полужирный шрифт и т. д. эти слова были захвачены и накладывается на текстовую область с использованием координат X Y, остальное, я уверен, я смогу выяснить позже, но что вы думаете? Поэтому я бы размещал только стилизованные слова/ссылки, а не остальные. Да? - person android.nick; 20.09.2010
comment
Вы можете взять верхние и левые координаты текстовой области и расположить каждое слово оттуда, чтобы оно идеально накладывалось на текстовую область. Мне потребовалось бы некоторое время, чтобы разобраться с захватом/размещением этих координат, так как я никогда ничего не делал с координатами, если у вас есть время, было бы неплохо посмотреть, работает ли это, если нет, в любом случае спасибо. - person android.nick; 20.09.2010