为什么 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 转换为小写。然后，如果您想超越自我，请在 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>

Answer 2

可以使用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 3

Please try the following:

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

Answer 4

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

为什么 toLowerCase() 反转文本——为什么？

Why is toLowerCase() reversing text — why?

javascript

jquery

lowercase