Warum wird toLowerCase() Text umgekehrt - warum?

Question

Ich verwende toLowerCase(), um einen Inhalt editierbare div in Kleinbuchstaben zu konvertieren. Aber es kehrt auch den Text um! Kann mir bitte jemand sagen, warum das passiert?

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

Danke, Tim

Answer 1

Dies ist eine sehr interessante. toLowerCase() kehrt den Text nicht um (Sie können dies überprüfen, indem Sie die Funktion entfernen, und Sie werden sehen, dass der Text immer noch umgekehrt wird). Was wirklich passiert ist, dass sich die Cursorposition nach dem Platzieren des neuen Textes an den Anfang bewegt.

Wie in anderen Antworten erwähnt, wäre ein einfacher Weg, dies zu tun, es über CSS zu tun. Aber wenn Sie es nur mit Javascript tun müssen, sehen Sie sich diese Lösung an. Wir verschieben die Cursorposition manuell nach dem Einfügen des neuen Textes an das Ende.

Die Implementierung der Funktion placeCaretAtEnd wurde von this answer inspiriert.

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

Es hat mit der Schrulligkeit von Browsern zu tun ... Wenn der Text festgelegt wird, die Der Cursor bewegt sich an den Anfang des bearbeitbaren Bereichs.

Eine weniger schrullige Lösung könnte die Konvertierung in Kleinbuchstaben mit CSS sein, während der Benutzer tippt. Wenn Sie dann noch weiter gehen möchten, führen Sie die eigentliche Konvertierung in JavaScript unter blur durch.

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

Kann CSS erreicht werden mit

#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

Please try the following: 

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