我使用toLowerCase()将内容可编辑div转换为小写.但它也扭转了文本！有人可以告诉我为什么会这样吗？

$(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>

小提琴：https://jsfiddle.net/professorsamoff/8zyvc202/3/

谢谢,
蒂姆

解决方法:

这是一个非常有趣的. toLowerCase()没有反转文本(你可以验证这是删除函数,你会看到文本仍然被反转).真正发生的是在放置新文本后光标位置移动到开头.

正如其他答案中所提到的,解决这个问题的一个简单方法是通过css来实现.但如果您只需要通过javascript进行操作,请查看此解决方案.放置新文本后,我们手动将光标位置移动到末尾.

placeCaretAtEnd函数的实现受到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>