Whenever I try to type in the code box and the content updates with the script provided, my cursor keeps getting moved to the beginning of the code. What can I do to resolve this issue?
function MaintainCursorPosition(Control) {
var target = $('.' + Control);
target.keyup(function() {
// Grab the current element.
var e = $(this);
// Get the text content.
var textContent = e.text();
// Replace any matches and wrap them with span tags.
var newTextContent = text.replace(/(\![a-zA-Z]*)/g, '<span class="mark">$1</span>');
// Update the html content of the original element.
e.html(newTextContent);
});
};
$(document).ready(function() {
MaintainCursorPosition('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>Is there a way to fix this issue effectively?
Your time and assistance are greatly appreciated.
UPDATE
The key is not to have the cursor jump to the beginning of the text but rather return it to where I last entered text.