jQueryでテキスト入力ボックス内の特定の場所を選択

Question

テキスト入力のライブプレビューを試しています。

現在のところ、ユーザーは入力時にテキストをプレビューすることができ、また、実際のプレビューテキストをクリックして入力フィールドを選択することもできます。私がしたいのは、ユーザーがライブプレビューテキストをクリックし、テキストフィールドのカーソルが、プレビューでクリックされたテキストとまったく同じ場所に表示されるようにすることです。 （任意のソリューションは、複数の入力フィールドで動作する必要があります）

以前の投稿は、範囲または特定の単語（下記参照）をハイライトする方法を示していますが、私がしようとしている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> \t \t \t \t 
 

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

 
<div> 
 
    <p class="description"></p>     
 
</div>

Answer 2

ロジックは単純です：

1. spanで各文字を包みます。
2. .descriptionをクリックして正確にspanを取得し、jQueryの.index()を使用してそのインデックスを取得します。
3. 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> \t \t \t \t 
 

 
<div> 
 
    <p class="description"></p>     
 
</div>