Posteado por: edeortuzar | 03/09/2013

Permitir solo números en un control TextBox de ASP usando JavaScript


Para permitir solo números (con o sin decimales) y además permitir la tecla Tab, el home, end, etc. debemos declarar un textbox como el siguiente:

<asp:TextBox ID="txtNumero" Text="" onkeydown="return jsDecimals(event);" Width="75px" runat="server"></asp:TextBox>

Y debemos agregar la función de JavaScript:

function jsDecimals(e) {

    var evt = (e) ? e : window.event;
    var key = (evt.keyCode) ? evt.keyCode : evt.which;
    if (key != null) {
        key = parseInt(key, 10);
        if ((key < 48 || key > 57) && (key < 96 || key > 105)) {
            //Aca tenemos que reemplazar "Decimals" por "NoDecimals" si queremos que no se permitan decimales
            if (!jsIsUserFriendlyChar(key, "Decimals")) {
                return false;
            }
        }
        else {
            if (evt.shiftKey) {
                return false;
            }
        }
    }
    return true;
}

// Función para las teclas especiales
//------------------------------------------
function jsIsUserFriendlyChar(val, step) {
    // Backspace, Tab, Enter, Insert, y Delete
    if (val == 8 || val == 9 || val == 13 || val == 45 || val == 46) {
        return true;
    }
    // Ctrl, Alt, CapsLock, Home, End, y flechas
    if ((val > 16 && val < 21) || (val > 34 && val < 41)) {
        return true;
    }
    if (step == "Decimals") {
        if (val == 190 || val == 110) {  //Check dot key code should be allowed
            return true;
        }
    }
    // The rest
    return false;
}

Tan simple como esto es que podes controlar el ingreso de números en un TextBox.

Espero que les sirva.

Saludos.

Anuncios

Responses

  1. ¡Buen tip!
    Definitivamente útil

  2. Me sirvió pero no en su totalidad. El objetivo no se cumple, si presionas la tecla del acento y presionas una letra por ejemplo, tecla acento + p, se ingresará una letra p para que lo tengan en cuenta. Sl2.

    • Me faltó agregar que lo comentado anteriormente, pasa en Google Chrome y no en IE.

      • Lo voy a tener en cuenta para probarlo, muchas gracias

    • Buenísimo, ya me pongo a investigar como resolverlo y lo subo. Muchas gracias por compartirlo. Abrazo

  3. Amigo excelente trabajo, solo que al aplicarlo en mi txtbox, quisiera ingresar el simbolo “-” para valores negativos, usando tu ejemplo solo me permite numero positivos, podrias ayudarme por favor.
    De antemano GRACIAS

    • Tenes que cambiar la función jsIsUserFriendlyChar para agregar que permita la tecla – (menos), en este es el código 109, como te muestro a continuación:

      function jsIsUserFriendlyChar(val, step) {
                  alert(val);
                  // Backspace, Tab, Enter, Insert, y Delete
                  if (val == 8 || val == 9 || val == 13 || val == 45 || val == 46 || val == 109) {
                      return true;
                  }
                  // Ctrl, Alt, CapsLock, Home, End, y flechas
                  if ((val > 16 && val < 21) || (val > 34 && val < 41)) {
                      return true;
                  }
                  if (step == "Decimals") {
                      if (val == 190 || val == 110) {  //Check dot key code should be allowed
                          return true;
                      }
                  }
                  // The rest
                  return false;
              }
      

      Saludos.

      • Muchaaas gracias mi hermano, no te habia podido responder. Lo habia intentado asi pero con el número ASCII referente a ese signo, el cual era diferente al que me diste si me podrias explicar eso te lo agradeceria mucho también.

      • Lo único que tiene de distinto es:

        LINEA ORIGINAL

        if (val == 8 || val == 9 || val == 13 || val == 45 || val == 46) {
        

        LINEA NUEVA PARA PERMITIR EL – (MENOS)

        if (val == 8 || val == 9 || val == 13 || val == 45 || val == 46 || val == 109) {
        

        Es distinto acá que el código ASCII, es el keycode del window.event del HTML.

        Para saber cual era fue que agregue el alert(val) (que deberías borrarlo, se me escapo).

        Me alegro que te haya ayudado.

        Saludos.

  4. El código es muy bueno, pero ciertamente en Chrome permite si el teclado esta en español, que marcando el acento se escriba luego una letra consonante. Qué podría hacer en este caso?


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Categorías

A %d blogueros les gusta esto: