为什么toLowerCase()会反转文本 - 为什么？

Question

我使用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/

蒂姆,谢谢

Answer 1

它与浏览器的怪癖有关......当设置文本时,光标移动到可编辑区域的开头.

一个不太古怪的解决方案可能是在用户输入时使用CSS转换为小写.然后,如果您想要超越,请在blur事件中使用JavaScript进行实际转换.

$(document).ready(function() {
  $('#user').blur(function() {
    console.log('Converting from '+$(this).text()+' to '+$(this).text().toLowerCase());
    $(this).text($(this).text().toLowerCase());
  });
});

#user {
  background: #f1f1f1;
  padding: 1em;
  text-transform:lowercase;
}

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