Cursor jumps to the start of code tag when updating html in it

Question

When I'm typing in my code tag and it updates the context with the script below, it keeps moving my cursor to the start of the code box. How can I fix it?

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>

How is it possible to solve this problem?

Thanks for your time and help.

UPDATE

The solution is not to get the cursor jump to the end of text but to make the cursor jump back to were I last wrote something

[http://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser/4238971#4238971](http://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser/4238971#4238971) — Lucky Chingi, Oct 20 '15 at 13:13

Ernesto Hegi · Answer 1 · 2015-10-22T13:42:19.183

0

I think one solution would be to use two different elements, one where you actually write your code, with a transparent colour, or another way of hiding its content, and another one where you actually display what you want to show.

Hope this helps.

edited Oct 22 '15 at 13:42

answered Oct 22 '15 at 11:00

Ernesto Hegi

333
3
3

score 0 · Answer 2 · answered Nov 05 '15 at 15:13

To make it work you can use the input event instead of keyup (this way it will trigger after each input even while holding the key down). And then use the Selection and Range objects to change the caret position accordingly. For example Range has setStart and setEnd methods that allow you to move the carret to a specific position.

For more precision on those objects see: https://developer.mozilla.org/en-US/docs/Web/API/Range and https://developer.mozilla.org/en-US/docs/Web/API/Selection (do note that some features on those object are still experimental)

Below is a quick example using you code. Note that this is not fully operational, to make it work properly, you'll have to adjust accordingly to get the caret into the proper position when there is an element generated by the exclamation marks. You also might have to handle the interaction of specific key inputs like Suppr or Backspace with the extra elements.

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>

Cursor jumps to the start of code tag when updating html in it

2 Answers2