Why is toLowerCase() reversing text — why?

Question

I am using toLowerCase() to convert a content editable div to lowercase. But it's also reversing the text! Can someone please tell me why this is happening?

$(document).ready(function() {
  $('#user').bind('keyup', function() {
    $(this).text($(this).text().toLowerCase());
  });
});

#user {
  background: #f1f1f1;
  padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="user" contenteditable="true"></div>

Fiddle: https://jsfiddle.net/professorsamoff/8zyvc202/3/

Thanks, Tim

Answer 1

This is a very interesting one. toLowerCase() is not reversing the text (you can verify this be removing the function and you will see that the text is still being reversed). Whats really happening is that the cursor position moves to the beginning after placing the new text.

As mentioned in other answers, a simple way to solve this would be to do it via css. But if you need to do it by javascript only, check out this solution. We’re manually moving the cursor position to the end after placing the new text.

The implementation of the placeCaretAtEnd function was inspired by this answer.

$(document).ready(function() {
  $('#user').bind('keyup', function() {
    $(this).text($(this).text().toLowerCase());
    placeCaretAtEnd(this);
  });
});

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

#user {
  background: #f1f1f1;
  padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="user" contenteditable="true"></div>