Estoy usando toLowerCase() para convertir un div editable de contenido a minúsculas. ¡Pero también está invirtiendo el texto! ¿Puede alguien decirme por qué sucede esto?
$(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>Violín: https://jsfiddle.net/professorsamoff/8zyvc202/3/
gracias, tim
Tiene que ver con la peculiaridad de los navegadores... Cuando se configura el texto, el cursor se mueve al principio del área editable.
Una solución menos peculiar podría ser convertir a minúsculas usando CSS mientras el usuario escribe. Luego, si desea ir más allá, realice la conversión real en JavaScript en el evento de blur .
$(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>Se puede lograr usando 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()); }); });