Home / Questions / 59991
Accepted
Dev 200
Asked: 2020-04-04 05:07:16 +0800 CST 2020-04-04 05:07:16 +0800 CST

Convert to uppercase the keys that are being pressed on any input

  • 772

I would like that when typing the keys they would be converted to Uppercase, taking into account that it can be done with any input of the form, that is, that the formula is general.

I have the following:

function mayus(e) {

    var tecla=e.value;
    var tecla2=tecla.toUpperCase();
    
    alert(tecla2);
}
<input type="text" onkeypress="mayus(this);">

javascript

5 Answers

  1. Best Answer

    Instead of using onKeyPress, I recommend that you use onKeyUp, it acts, when you stop pressing the key.

    So the only thing we do is, using the function we toUpperCase()will convert the whole string in general, and it will give the effect that it is done one by one, since in each event of onKeyUp()the function will be executed.

    That is, it is not necessary to convert to uppercase letter by letter.

    Still, you can replicate the function in others <input type='text'>and it will work just the same, so there is no problem in making it general.

    function mayus(e) {
    e.value = e.value.toUpperCase();
}
    <input type="text" onkeyup="mayus(this);">
<input type="text" onkeyup="mayus(this);">

    Another way to solve it would be like this:

    When creating the <input type='text'>, you assign one idto each one, and later you can apply this formula.

    <input type="text" id="campo" onKeyUp="document.getElementById(this.id).value=document.getElementById(this.id).value.toUpperCase()">

    • 14

  2. The easiest way without having to call javascript just include this line in your css:

    input{
    text-transform: uppercase;
}

    and ready.

    • 4

  3. With jQuery you can change to Uppercase the text of any <input>or <textarea>, try the following code by inserting it in the head ( <head>) of the document:

        <script>
     $(document).ready( function () {
      $("input").on("keypress", function () {
       $input=$(this);
       setTimeout(function () {
        $input.val($input.val().toUpperCase());
       },50);
      })
     })
    </script>

    You can also use CSS to indicate that <input>or <textarea>you want to convert to uppercase:

    $(document).ready( function () {
 $(".UpperCase").on("keypress", function () {
  $input=$(this);
  setTimeout(function () {
   $input.val($input.val().toUpperCase());
  },50);
 })
})
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
 <h1>Datos de Contacto</h1>
 <pre>
  codigo    <input name="codigo">
  nombre    <input name="nombre" class="UpperCase">
  dirección <input name="direccion">
  teléfono  <input name="telefono">
  cargo     <input name="cargo" class="UpperCase">
 </pre>
<form>

    • 3

  4. I had the same problem. However I have a development using WebForms in ASP.Net.

    To complicate things I am using DevExpress controls. And since their "inputs" (or TextBoxes) are made based on tables, I had to do it this way:

    1. First in the ASPxTextBox control I looked for the KeyUp client-side event, as suggested by Iván Botero. It can be found by having the control selected in design view in the Window properties as ClientSideEvents. The node is displayed and we select the KeyUp event
    2. When the window opens, the function is written in a similar way to how our colleague proposed it to us. In this case I have it as follows:

    function convierteTextoAMayusculas(s, e) {
    s.inputElement.value = s.inputElement.value.toUpperCase();
}

    I decided to do it this way because I have that function in a separate javascript document, since I plan to reuse it in other areas of the document and in other documents. In fact, I would recommend following the pattern suggested by the DevExpress controls themselves so that everything is clearer, as in the following:

    <dx:ASPxTextBox ID="xtxtMiTextBox" runat="server" Width="170px">
    <ClientSideEvents KeyUp="function(s, e) { convierteTextoAMayusculas(s, e); }" />
</dx:ASPxTextBox>

    This way we can notice that we get the reference to the control that invokes the event in its source(s) argument to work with it.

    Thank you very much for the previous replies, they were very helpful.

    Greetings to all.

    • 1

  5. I use this (reading the event keyup) and it works for me without problems:

    $('#ordenName').keyup(function() {
  var datos = new String($('#ordenName').val());
  datos = datos.toUpperCase(datos);
  $('#lblOrden').html(datos);
  $('#ordenName').val(datos);
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Usted esta escribiendo esto: <span id="lblOrden"></span></p>

<input type="text" class="form-control" name="norden" id="ordenName">

    • 1