I am using toLowerCase() to convert a content editable div to lowercase. But it's also reversing the text! Can someone please tell me why this is happening?
$(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/
Thanks, Tim
It has to do with the quirkiness of browsers... When the text is being set, the cursor moves to the beginning of the editable area.
A less quirky solution might be to convert to lowercase using CSS while the user is typing. Then, if you want to go above and beyond, do the actual conversion in JavaScript on the blur event.
$(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>Can be achieved using 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>Please try the following:
$(document).ready(function() {
$('#user').bind('keyup', function() {
$(this).val($(this).val().toLowerCase());
});
});