Question

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

＆＃13;

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

＆＃13;

#user {
  background: #f1f1f1;
  padding: 1em;
}

＆＃13;

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

＆＃13;

小提琴： https://jsfiddle.net/professorsamoff/8zyvc202/3/

谢谢，添

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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（）会反转文本 - 为什么？

4 个答案: