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

Question

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

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

以前的帖子展示了如何突出显示一个范围或一个特定的单词(见下文(，但我找不到任何Javascript/JQuery来描述我正在尝试做的事情。任何建议都会有所帮助！

相关堆栈溢出问题：使用 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

我认为这就是你要找的。

$('.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. 将光标移动到具有此答案中的代码的索引。

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

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

$( 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>