problem when converting text to lowercase

Asked

Viewed 92 times

1

Galera created a function that converts the text to lowercase inside the input, the problem is that when I enter an input with value, and having change something the cursor jumps to the end. Someone knows how to fix this?

My code:

// Converte minusculas em maiusculas
function up(lstr) {
    var str = lstr.value;
    lstr.value = str.toUpperCase();
}
<input OnKeyUp='up(this)' type='text' class='form_campos form_campos_simples' id='inputNormal' name='historico' value="TESTANDO O TEXTO">

javascript jquery html

  • try adding in javascript: formula_name.historico.Focus(); unless formula_name is configured in the form tag Ex: <form name="formula_name" acrion="">

  • could you give me a practical example? I didn’t quite understand that.

  • 1

    It wouldn’t be enough to use CSS? text-transform: lowercase;?

  • did not work, look ai:http://jsfiddle.net/f3vpyhnk/16/

2 answers

2


No need to use function, use so direct input:

onkeyUP="this.value = this.value.toUpperCase()"

Using Ajax, allows editing anywhere in the field without skipping the cursor:

$(document).ready( function() {
  $("#NOME_DO_SEU_INPUT").on('input', function(){

    // armazena posição corrente
    var start = this.selectionStart,
        end = this.selectionEnd;

    this.value = this.value.toUpperCase();

    // restaura posição armazenada anteriormente.
    this.setSelectionRange(start, end);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="NOME_DO_SEU_INPUT" />

Adaptation from here

  • well your alternative contains the same problem of my function, when I get an input with defined value, it is not possible to change it, because the cursor jumps to the end after typing something in it. you have a solution for this?

  • Check this link, using Ajax: http://stackoverflow.com/questions/14508707/updating-an-inputs-value-without-losing-cursor-position

  • See in my reply, I added Ajax that should help you.

  • forgive my ignorance but I have not yet been able to make it work, the problem continues, looking at the code: http://jsfiddle.net/f3vpyhnk/14/

  • delete "Upcase" and put the name of your input, keeping #. Then delete onkeyUP="this.value = this.value.toUpperCase()" that is in the input.

  • friend, I tested here and edited the answer. Copy exactly the answer I put, just change the name of your input.

  • hasn’t worked out yet. give a look at the code as it was:http://jsfiddle.net/f3vpyhnk/15/ There is something else, this way would not work, because I have a form with several input

  • use input like this: <input type="Text" name="test" id ="test">. As for the other fields, just add their name in the function.

  • its function worked perfectly, but for me it will not work, because my input I already use the name for several other things and tbm id for other form mounting functions. need a function that I can call through understand onkeyUP or call through if another way. Has some way to do this with its function?

  • just add the variables separating by comma: #test, #teste2, #teste3.....

  • I get it, even then it’s impossible. I know, do you have any way of assigning your function to all input elements? ie it would run for all input, regardless of id or name. This has how to do?

  • The way I showed you runs for everyone, just by name as I explained, separating by commas at the beginning of the function.

  • I know, but it’s not for me to create an id all input guy because it’s a lot the inout of the system understands. If I made it run on all <input> tags it would be much more practical and the code would be much smaller. Seriously the system has about 800 input, imagine how big the code would be. That’s why I’m asking you how to run it in all <input tags>

Show 8 more comments

1

Good with the help of diego came the following solution:

$(document).ready( function() {
  $('input').on('input', function(){

    // Armazena posição corrente do cursor
    var start = this.selectionStart,
        end = this.selectionEnd;

    this.value = this.value.toUpperCase();

    // Restaura posição armazenada anteriormente.
    this.setSelectionRange(start, end);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input nome="campo1">
<input nome="campo2">
<input nome="campo3">
<input nome="campo4">
<input nome="campo5">
<input nome="campo6">
<input nome="campo7">

Thanks for the help.

  • Glad you could help. If you can mark my answer as sure, thank you. Thank you.

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.