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

逻辑很简单：

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> 

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>