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

Question

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

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

以前的帖子展示了如何突出显示一个范围或一个特定的词（见下文），但我找不到任何 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

逻辑很简单：

用 span.
点击 .description 获得准确的 span 并使用 jQuery 的 .index() 获得它的索引。
使用 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>

Answer 2

我想这就是您要找的。

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

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

Selecting a particular location inside a Text Input Box with jQuery

html

javascript

css

jquery

live-preview