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

Please try the following:

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

Answer 2

这是一个非常有趣的。 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>

Answer 3

可以用css实现

#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" style="text-transform: lowercase"></div>

Answer 4

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

一个不那么古怪的解决方案可能是在用户键入时使用 CSS 转换为小写。然后，如果您想超越，请在 JavaScript 中对 blur 事件进行实际转换。

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