Il cursore si sposta all'inizio del tag di codice durante l'aggiornamento di html in esso

Question

Quando sto digitando il mio codice e aggiorna il contesto con lo script seguente, continua a spostare il cursore all'inizio della casella del codice. Come posso ripararlo?

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>

Come è possibile risolvere questo problema?

Grazie per il vostro tempo e aiuto.

UPDATE

La soluzione non è quella di ottenere il salto cursore alla fine del testo, ma per rendere il cursore salta di nuovo a stati che ho scritto qualcosa

Answer 1

Credo che una soluzione potrebbe essere quella di utilizzare due diversi elementi, uno in cui scrivi il tuo codice, con un colore trasparente, o un altro modo di nascondere il suo contenuto, e un altro in cui effettivamente mostri ciò che vuoi mostrare.

Spero che questo aiuti.

Answer 2

Per farlo funzionare è possibile utilizzare l'evento input invece di keyup (in questo modo si innesca dopo ogni ingresso, anche tenendo premuto il tasto in basso). Quindi utilizzare gli oggetti Selection e Range per modificare di conseguenza la posizione del punto di inserimento. Ad esempio Range ha setStart e setEnd metodi che consentono di spostare il carret in una posizione specifica.

Per una maggiore precisione su quegli oggetti si veda: https://developer.mozilla.org/en-US/docs/Web/API/Range e https://developer.mozilla.org/en-US/docs/Web/API/Selection (si noti che alcune caratteristiche di quelli oggetto sono ancora in fase sperimentale)

Qui di seguito un breve esempio utilizzando il codice. Nota che questo non è completamente operativo, per farlo funzionare correttamente, dovrai adeguarti di conseguenza per ottenere il punto di inserimento nella posizione corretta quando c'è un elemento generato dai punti esclamativi. Potrebbe anche essere necessario gestire l'interazione di specifici input chiave come Suppr o Backspace con gli elementi aggiuntivi.

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>