Javascript 为什么toLowerCase（）在反转文本—；为什么？

我正在使用toLowerCase（）将内容可编辑div转换为小写。但它也颠倒了文本！有人能告诉我为什么会这样吗

$（文档）.ready（函数（）{
$（'#user'）.bind（'keyup'，function（））{
$（this.text（$（this.text（）.toLowerCase（））；
});
});
#用户{
背景#f1f1；
填充：1em；
}
这与浏览器的怪癖有关。。。设置文本时，光标移动到可编辑区域的开头

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


$（文档）.ready（函数（）{
$（'#user'）.blur（函数（）{
log（'从'+$（this.text（）+'转换为'+$（this.text（）.toLowerCase（））；
$（this.text（$（this.text（）.toLowerCase（））；
});
});
#用户{
背景#f1f1；
填充：1em；
文本转换：小写；
}
可以使用css实现


#用户{
背景#f1f1；
填充：1em；
}
这是一个非常有趣的问题。toLowerCase（）没有反转文本（您可以验证这是否是在删除函数，您将看到文本仍在反转）。真正发生的是，光标位置在放置新文本后移到开头

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

placeCaretAtEnd函数的实现受到了以下启发


$（文档）.ready（函数（）{
$（'#user'）.bind（'keyup'，function（））{
$（this.text（$（this.text（）.toLowerCase（））；
placeCaretAtEnd（本）；
});
});
函数placeCaretAtEnd（el）{
el.focus（）；
if（typeof window.getSelection！=“未定义”
&&typeof document.createRange！=“未定义”）{
var range=document.createRange（）；
范围。选择节点内容（el）；
范围。塌陷（假）；
var sel=window.getSelection（）；
选择removeAllRanges（）；
选择添加范围（范围）；
}else if（typeof document.body.createTextRange！=“未定义”）{
var textRange=document.body.createTextRange（）；
textRange.moveToElementText（el）；
textRange.collapse（false）；
textRange.select（）；
}
}
#用户{
背景#f1f1；
填充：1em；
}

因为每次按下一个键时，您都在重写内容，并且您的光标被设置为0位置，可能重复：啊！我懂了。我不是那样想的。非常感谢。这是因为您使用div输入文本，浏览器光标自动将其位置设置为第一个索引。右。现在要找到一个真正有效的方法…文本本身必须转换，而不仅仅是样式。不过，谢谢。在我的测试中，blur（）函数实际上并没有转换文本，不过…我理解blur（）的工作，但在这种情况下它似乎不起作用…？哪个浏览器出现故障？我在Edge、Chrome和Firefox上做了一个快速测试。所有浏览器。请记住，此测试将始终“显示”以与CSS一起工作。啊，等等……我看到，事实上，当div失去焦点时，文本将被转换。那么，如果div保持焦点，我如何转换文本呢？我有点好奇这里的用例。如果您必须在用户键入时进行实际对话，那么@OmarAlEisa下面的答案可能是您的最佳选择。就个人而言，我认为CSS解决方案在键入时感觉更干净（光标不会闪烁）。但是，如果最终目标是将文本小写，那么使用blur（）最终可以实现这一点。如果你正在向服务器发布一些东西，你也可以在那里进行转换。对不起，但是val（）不适用于内容可编辑的div，只适用于输入字段。不知道你为什么会被否决——事实上，这是我的答案。非常感谢。这种方法不让你使用左箭头来编辑你输入的内容，如果你点击中间并开始键入，你的插入符号就被发送到结束，而不是以前。dana发布的css解决方案是最容易访问的。但是如果你真的想要这种过渡效果，你就应该检查键盘代码，并跟踪插入符号的位置。如果我正确理解你的情况，如果是游戏，如果你需要使用小写字母的信息，只需将文本副本发送到回调，并在其上应用小写（）而不是直接在输入上。啊，对……这是一个问题。当然，一个简单的条件可以解决这个问题，尽管它不能处理文本选择的Cmd/Ctrl+a。而且，是的，我喜欢“用小写字母发送”选项——这个问题让我非常烦恼。
Please try the following:

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