使用 jQuery 在文本输入框中选择特定位置

Question

我正在试验文本输入的实时预览。

目前，用户可以在键入时预览文本，也可以通过单击实时预览文本来选择输入字段。我想做的是允许用户单击实时预览文本，并使文本字段中的光标出现在文本中与他们在预览中单击的位置完全相同的位置。 （任何解决方案都必须使用多个输入字段。）

以前的帖子展示了如何突出显示范围或特定单词（见下文），但我找不到任何 Javascript/JQuery 来做我想做的事。任何建议都会有所帮助！

相关堆栈溢出问题：Selecting Part of String inside an Input Box with jQuery

$( document ).ready(function() {
  $('.liveInput').keyup(function(){
    var $this = $(this);
    $('.'+$this.attr('id')+'').html($this.val());
  });

  $('.description').click(function(){
    $('#description').focus();
  });

  $(".description").hover(function () {
    $(this).toggleClass("preview-hover");
  });
});

.preview-hover {
  cursor:pointer;
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="description" class="liveInput" name="description" cols="80" rows="8" style="width:100%; resize:vertical;" placeholder="POST CONTENT"></textarea>				

<div>
  <p class="description"></p>                   
</div>

Answer 1

我想这就是你要找的。​​p>

$('.liveInput').keyup(function(){
     var $this = $(this);
     $('.'+$this.attr('id')+'').html($this.val());
});
 
$('.description').click(function(){
    s = window.getSelection();
         var range = s.getRangeAt(0);
         var node = s.anchorNode;

         $('.liveInput')[0].setSelectionRange(range.startOffset, range.startOffset);

 });
 
$(".description").hover(function () {
     $(this).toggleClass("preview-hover");
});

.preview-hover {
     cursor:text;
     opacity: 0.5;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="description" class="liveInput" name="description" cols="80" rows="8" style="width:100%; resize:vertical;" placeholder="POST CONTENT"></textarea>				

<div>
   <p class="description"></p>                   
</div>

Answer 2

逻辑很简单：

1. 用span包装每个字符。
2. 点击.description得到准确的span并使用jQuery的.index()得到它的索引。
3. 将光标移动到带有this 答案中代码的索引。

如果有什么不清楚的地方请告诉我。

另外我猜在某些时候这段代码会很重，所以不要在大文本上这样做。

$( document ).ready(function() {
  $('.liveInput').keyup(function(){
    var $this = $(this);
    $('.'+$this.attr('id')+'').html(function() {
       return $this.val().split('').map(function(char) {
         return '<span>' + char + '</span>';
       }).join('');
    });
  });

  $('.description').click(function(e) {
    var span = $(e.target);
    var caretPos = $(this).find('span').index(span);
    //var caretPos
    var elem = $('#description')[0];
    if(elem.createTextRange) {
      var range = elem.createTextRange();
      range.move('character', caretPos);
      range.select();
    }
    else {
      if(elem.selectionStart) {
        elem.focus();
        elem.setSelectionRange(caretPos, caretPos);
      }
      else
        elem.focus();
    }
  });

  $(".description").hover(function () {
    $(this).toggleClass("preview-hover");
  });
});

.preview-hover {
  cursor:pointer;
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="description" class="liveInput" name="description" cols="80" rows="8" style="width:100%; resize:vertical;" placeholder="POST CONTENT"></textarea>				

<div>
  <p class="description"></p>                   
</div>