javascript - 为什么 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>

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

谢谢，蒂姆

Answer 1

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

一个不太古怪的解决方案可能是在用户键入时使用 CSS 将其转换为小写。然后，如果您想超越 self ，请在 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>