Question

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

逻辑很简单：

用span包裹每个角色。
点击.description获取完全span并使用jQuery的.index()获取其索引。
使用this answer。

如果不清楚，请告诉我。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我认为这就是你要找的东西。

＆＃13;

$('.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");
});

＆＃13;

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

＆＃13;

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

＆＃13;

使用jQuery

2 个答案: