Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas
Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas

miércoles, 30 de enero de 2013

Limitar número de enteros y de decimales por Javascript

Hace poco he tenido que lidiar con un código demasiado manual, de modo que he tenido que echar mano de Javascript para meter una limitaciones en textbox (input), y no permitir la introducción de un número máximo de decimales y de enteros.
Por supuesto, googleando encontraba cosas, pero no terminaron de convercerme, así que con un poco de esto y otro de aquello, et voila:

La invocación, como siempre en el onkeypress:


1
<asp:TextBox ID="txtValidate" runat="server" onkeypress="return validateFloatKeyPress(this, event, 4, 6);"></asp:TextBox>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/// <summary>
/// Validamos el número de enteros y decimales
/// </summary>
/// <param name="el">Elemento que lanza el método</param>
/// <param name="evt">Evneto</param>
/// <param name="ints">Número de enteros permitidos</param>
/// <param name="decimals">Número de decimales permitidos</param>
function validateFloatKeyPress(el, evt, ints, decimals) {

    // El punto lo cambiamos por la coma
    if (evt.keyCode == 46) {
        evt.keyCode = 44;
    }
    
    // Valores numéricos
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 44 && charCode > 31
        && (charCode < 48 || charCode > 57)) {
        return false;
    }
    
    // Sólo una coma
    if (charCode == 44) {
        if (el.value.indexOf(",") !== -1) {
            return false;
        }

        return true;
    }

    // Determinamos si hay decimales o no
    if (el.value.indexOf(",") == -1) {
        // Si no hay decimales, directamente comprobamos que el número que hay ya supero el número de enteros permitidos
        if (el.value.length >= ints) {
            return false;
        }
    }
    else {

        // Damos el foco al elemento
        el.focus();

        // Para obtener la posición del cursor, obtenemos el rango de la selección vacía
        var oSel = document.selection.createRange();

        // Movemos el inicio de la selección a la posición 0
        oSel.moveStart('character', -el.value.length);

        // La posición de caret es la longitud de la selección
        iCaretPos = oSel.text.length;

        // Distancia que hay hasta la coma
        var dec = el.value.indexOf(",");

        // Si la posición es anterior a los decimales, el cursor está en la parte entera
        if (iCaretPos <= dec) {
            // Obtenemos la longitud que hay desde la posición 0 hasta la coma, y comparamos
            if (dec >= ints) {
                return false;
            }
        }
        else { // El cursor está en la parte decimal
            // Obtenemos la longitud de decimales (longitud total menos distancia hasta la coma menos el carácter coma)
            var numDecimals = el.value.length - dec - 1;
                
            if (numDecimals >= decimals) {
                return false;
            }
        }
    }
    
    return true;
}

martes, 11 de diciembre de 2012

Tests en Javascript


Cuando trabajamos con lenguajes dinámicos como Javascript los tests son mucho más importantes que en lenguajes estáticos. Ahora que he empezado a usar mas Javascript en la vida real y tener cosas más complejas que aplicaciones básicas con node.js o Knockout, mantener el código funcionando se hace más complicado y los tests más necesarios.

La principal razón por la que los tests son más necesarios se porque no hay una fase de compilación como tal. Esto provoca que no podamos detectar fallos hasta el momento de ejecutar la aplicación, pero sobre todo impide aprovechar las capacidades de análisis estático de un compilador moderno.

martes, 11 de septiembre de 2012

Otra guía más de conceptos básicos de jQuery

Por ahí se dice que es el tutorial definitivo para aprender jQuery de un modo rápido, sencillo y eficaz. Vosotros mismos....

Aquí está el enlace.

viernes, 18 de mayo de 2012

Spin.js


Spin.js es una librería para crear animaciones de “cargando”, conocidos como spinners, sin requerir de imágenes ni estilos CSS adicionales.

Funciona perfectamente en todos los navegadores y es un script escrito en Javascript que puede añadirse fácilmente en cualquier sitio web, sin dependencias con jQuery o similares.

Spin.js

Resto del artículo (fuente original)

lunes, 14 de mayo de 2012

Crossfilter.js: Fast Multidimensional Filtering for Coordinated Views

Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser. Crossfilter supports extremely fast (<30ms) interaction with coordinated views, even with datasets containing a million or more records; we built it to power analytics for Square Register, allowing merchants to slice and dice their payment history fluidly.

Resto del artículo (fuente original)

What JavaScript taught me about C# – Understanding ‘Access to modified closure’

If you’ve spent any time writing C# using a copy of ReSharper you will have come across the phrase ‘Access to modified closure’. It’s a well known warning and there are plenty of StackOverflow questions and blog posts about it.

Resto del artículo (fuente original)

Prototypes in JavaScript

When you define a function within JavaScript, it comes with a few pre-defined properties; one of these is the illusive prototype. In this article, I’ll detail what it is, and why you should use it in your projects.

Resto del artículo (fuente original)

Entendiendo los prototipos en JavaScript

Estoy preparando alguna presentación sobre JavaScript y, aunque intuía o sospechaba algunos aspectos sobre el modelo de orientación a objetos que se implementa en JavaScript, quería pisar terreno firme. El artículo que traduzco hoy me ha parecido muy esclarecedor, así que aquí lo comparto con vosotros, traducido a español.

Resto del artículo (fuente original)

lunes, 7 de mayo de 2012

Tutorial gratis de programación en Javascript

Manuales de Javascript completos, para aprender todas las bases del lenguaje; Manuales destinados a introducir la Javascript, en el marco de la programación web; videotutoriales

Resto del artículo (fuente original)

Visitor.js: personaliza tu sitio web para cada tipo de visitante

​Una de las cosas más importantes para un sitio web es conocer a sus visitantes para de esta manera poder brindarles la información, productos o servicios que les interesen. Pero como hacemos para averiguar algunos datos de los usuarios?

Resto del artículo (fuente original)

Tutorial de Backbone.js


​Llevo un tiempo analizando y aprendiendo a trabajar con la librería Backbone.js y me parece una librería estupenda para desarrollar aplicaciones JavaScript. El mayor problema que estoy encontrando es la falta de tutoriales y documentación al respecto, y por ese motivo he decido crear un pequeño tutorial donde se analice el funcionamiento de la librería. Este tutorial lo iré desarrollando poco a poco en distintas entradas, intentando resaltar los aspectos más importantes y analizando cada uno de sus componentes.

Resto del artículo (fuente original)

JavaScript Style Guides And Beautifiers

Today we're going to explore JavaScript style guides, specifically: their importance, style guides worth reviewing and tools that can assist in automated code beautification or style enforcement.

Resto del artículo (fuente original)

viernes, 4 de mayo de 2012

Validación en Javascript. Código muy limpio.

In a recent project I had to validate a form in Javascript, I've done it thousands of times, but during this one instance I had a stroke of ... oh my god I can really do this ... moment. Essentially it cleaned up about 40 lines of code down to about five or six, and ontop of that, you can easily set variables inside your operation or outside, its just beautiful:

Resto del artículo (fuente original)

Revisión de los Frameworks MVC de Javascript

Over the last several months I have been in a constant search for the perfect javascript MVC framework. Driven by a dire need for the right level of abstraction and features, I have tried out - some more cursorily than others - every framework I could get my hands on. Here lies a brief synopsis of each framework. Lastly, I share the framework which I ultimately decided on.

Resto del artículo (fuente original)

10 Plugins de Javascript para construir diagramas y gráficos

A plethora of amazing free Javascript plugins for plotting charts and graphs are now present online. Many good charting libraries are available. The rapid increase in the availability of this kind of plugins is because of the fact that people are no longer dependant on Flash. Modern browsers and sophisticated computing has made it easy to render live data. Advancement in various vector drawing technologies like VML, SVG and Canvas has also made it possible.

Resto del artículo (fuente original)

Javascript Garden. Documentación.

JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.

Resto del artículo (fuente original)

Chosen, plugin Javascript para jQuery (con enlace a GitHub)

Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.

Resto del artículo (fuente original)