Выбор определенного местоположения в текстовом поле ввода с jQuery

Question

Я экспериментирую с живым предварительным просмотром текстовых входов.

На данный момент пользователи могут просматривать текст по мере их ввода, а также выбрать поле ввода, щелкнув текст предварительного просмотра в реальном времени. То, что я хотел бы сделать, это позволить пользователям щелкнуть текст предварительного просмотра в реальном времени и отобразить курсор в текстовом поле в том же месте в тексте, где они были нажаты в предварительном просмотре. (Любое решение должно работать с несколькими полями ввода.)

Предыдущие сообщения показывают, как выделить диапазон или конкретное слово (см. Ниже), но я не мог найти Javascript/JQuery для того, что я пытаюсь сделать. Любые советы будут полезны!

Связанные Stack Overflow Вопрос: 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. Wrap каждый символ с span.
2. Нажмите на .description и получите его .index() jQuery.
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>