Saca tus scripts de tu código HTML

 ·  ☕ 4 min  ·  ✍️ eiximenis

    Nota: Este post ha sido importado de mi blog de geeks.ms. Es posible que algo no se vea del todo "correctamente". En cualquier caso puedes acceder a la versión original aquí

    Buenas! En el post anterior os comenté el soporte de Unobtrusive Ajax en ASP.NET MVC3. Hoy quiero mostraros que esa técnica ni es exclusiva de MVC3, ni  requiere HTML5 para nada. En fin, que podéis empezar a usarla ya, con independencia de la tecnología que uséis. Lo que contaré en este artículo no es nada “revolucionario” ni una “técnica nueva”…

    De hecho, el ejemplo va a ser una página HTML, nada de ASP.NET 🙂

    Veamos, la técnica de Unobtrusive Javascript, se refiere a no tener mezclado código javascript con código de marcado HTML. Es decir, no queremos algo como:

    <input type="text" id="txtName" onkeypress="checkKey();" />

    Aquí estamos mezclando código HTML con el código javascript (la llamada checkKey en el onkeypress).

    Imaginemos que queremos que nuestros textboxes sólo acepten números. Y recordad que el objetivo es no tener código javascript mezclado con nuestro código HTML.

    Eso lo podemos conseguir fácilmente, ya con jQuery:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Demo Unobtrusive Javascript</title>
    <script src="jquery-1.4.1.js" type="text/javascript"></script>
    </head>
    <body>
    <script type="text/javascript">
    $(document).ready(function () {
    $('input:text').keypress(function (event) {
    if (event.keyCode < 47 || event.keyCode > 58) {
    event.preventDefault();
    }
    });
    });
    </script>

    Introduce sólo números: <br />
    <input type="text" />
    </body>
    </html>

    Incluso, si no queréis que haya el tag

    Si quieres, puedes invitarme a un café xD

    eiximenis
    ESCRITO POR
    eiximenis
    Compulsive Developer