Capitalize keys that are being pressed from any input


I would like to write the keys to be capitalized, 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();
<input type="text" onkeypress="mayus(this);">
asked by Victor Alvarado 03.04.2017 в 15:07

4 answers


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

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

In other words, it is not necessary to convert capital letters letter by letter.

Likewise, you can replicate the function in other <input type='text'> and it will work the same, so there is no problem in that it is 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 a id to each, and later you can apply this formula.

<input type="text" id="campo" onKeyUp="document.getElementById(">
answered by 03.04.2017 / 15:15

With jQuery you can capitalize the text of any <input> or <textarea> , try the following code by inserting it in the header ( <head> ) of the document:

     $(document).ready( function () {
      $("input").on("keypress", function () {
       setTimeout(function () {

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

$(document).ready( function () {
 $(".UpperCase").on("keypress", function () {
  setTimeout(function () {
<script src=""></script>
 <h1>Datos de Contacto</h1>
  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">
answered by 03.04.2017 в 20:40

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

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

  • First, in the ASPxTextBox control, I looked for the event on the client side KeyUp, as Ivan Botero suggested. You can find it by having the control selected in the design view in the Properties window, such as ClientSideEvents. The node is deployed and we select the KeyUp event
  • When the window is opened, the function is written in a similar way to how our partner 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 that 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 continuing with the pattern suggested by the same DevExpress controls 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); }" />

    In 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 answers, they were very useful.

    Greetings to all.

    answered by 14.02.2018 в 18:59
    <p>Usted esta escribiendo esto: <span id="lblOrden"></span></p>
    <input type="text" class="form-control" name="norden" id="ordenName">
        var datos = new String($('#ordenName').val());
        datos = datos.toUpperCase(datos);

    This one I use and it works for me without problems

    answered by 13.12.2018 в 01:10