1

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

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

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

4

2 回答 2

0

我想这就是你要找的。

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

于 2017-02-06T16:46:15.970 回答
0

逻辑很简单：

  1. 用 . 包裹每个字符span。
  2. 单击.description获取确切span并使用.index()jQuery 获取其索引。
  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>

于 2017-02-06T16:43:31.610 回答