Kursor przeskakuje do początku znacznika kodu podczas aktualizacji html w nim

Question

Kiedy wpisuję mój znacznik kodu i aktualizuje on kontekst za pomocą poniższego skryptu, przesuwa kursor na początek okna kodu. Jak mogę to naprawić?

function HastTagLocation(Controll) { 
 
    var controller = $('.' + Controll); 
 
    controller.keyup(function() { 
 

 
    // Get the code element. 
 
    var e = $(this); 
 
    // Get the text content. 
 
    var text = e.text(); 
 
    // Replace the matches and wrap them with span tag. 
 
    var text = text.replace(/(\![a-zA-Z]*)/g, '<span class="mark">$1</span>'); 
 
    // Set the html of the original element. 
 
    e.html(text); 
 

 
    }); 
 

 
}; 
 

 
$(document).ready(function() { 
 
    HastTagLocation('form-control'); 
 
});

.hash { 
 
    background-color: #808080; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<code class="form-control" id="test" contenteditable="true" style="height: 100%; min-height: 100px"></code>

Jak to możliwe, aby rozwiązać ten problem?

Dziękujemy za poświęcony czas i pomoc.

UPDATE

Rozwiązaniem nie jest dostać skok kursora na koniec tekstu, ale aby kursor przeskoczy z powrotem do zostały po raz ostatni napisał coś

Answer 1

Myślę, że jednym rozwiązaniem byłoby wykorzystanie dwa różne elementy, jeden, w którym faktycznie piszesz swój kod, z przezroczystym kolorem lub inny sposób ukrywania jego zawartości, i drugi, w którym faktycznie wyświetlasz to, co chcesz pokazać.

Mam nadzieję, że to pomoże.

Answer 2

Aby to zadziałało, można użyć zdarzenia input zamiast keyup (w ten sposób uruchomi się po każdym wejściu, nawet gdy przytrzymasz klawisz w dół). A następnie użyj obiektów Selection i , aby odpowiednio zmienić pozycję karetki. Na przykład: Range ma setStart i setEnd metody, które pozwalają przenieść carret do określonej pozycji.

Dla większej precyzji w tych obiektach patrz: https://developer.mozilla.org/en-US/docs/Web/API/Range i https://developer.mozilla.org/en-US/docs/Web/API/Selection (należy pamiętać, że niektóre funkcje na tych obiektów są wciąż w fazie eksperymentalnej)

Poniżej znajduje się krótki przykład stosując Ci kod. Należy zauważyć, że nie jest to w pełni sprawne, aby działało poprawnie, musisz odpowiednio dostosować, aby ustawić karetkę w odpowiedniej pozycji, gdy element generowany jest przez wykrzykniki. Może być również konieczne obsłużenie interakcji określonych kluczowych wejść, takich jak Suppr lub Backspace z dodatkowymi elementami.

function HastTagLocation(Controll) { 
 
    var controller = $('.' + Controll); 
 
    controller.on('input', function (evt) { 
 
     // Storing the caret state 
 
     var sel, range, start, end ; 
 
     sel = window.getSelection(); 
 
     range = sel.getRangeAt(0); 
 
     start = range.startOffset; 
 
     end = range.endOffset; 
 

 
     // Get the code element. 
 
     var e = $(this); 
 
     // Get the text content. 
 
     
 
     var text = e.text(); 
 
     // Replace the matches and wrap them with span tag. 
 
     var text = text.replace(/(\![a-zA-Z]*)/g, '<span class="mark">$1</span>'); 
 
     // Set the html of the original element. 
 
     e.html(text); 
 

 
     // restoring the caret 
 
     range.setStart(this.childNodes[0], start); 
 
     range.setEnd(this.childNodes[0], end); 
 

 
    }); 
 

 
}; 
 

 
$(document).ready(function() { 
 
     HastTagLocation('form-control'); 
 

 
    });

.hash { 
 
    background-color:#808080; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<code class="form-control" id="test" contenteditable="true" style="height: 100%; min-height: 100px"></code>