Grab a Client’s Attention: A Cool Little Javascript Number Input Box

May 12th, 2010 - Posted by Steve Marks to Javascript / jQuery, Web Development.

A web application could contain equations and processes that Stephen Hawking himself would be proud of, but there’s one little feature I use in my work that always guarantees an instant reaction from users. Hell, I’m sure it’s even won me jobs before when showing it to potential clients.

“What is it?” I hear you cry. Try the demonstration below to see for yourself. Simply enter a number followed by one of the letters specified and you will see what happens:

View a Demonstration

As you will see, instead of having to manually enter and count the zeros, simply pressing the relevant letter will automatically format the number for you. Pretty cool huh? I’ve found this feature especially handy in the past when having to enter long numbers, for example property prices. I have included the code that is used in the demonstration below should you want to use this feature on your own website:

<html>
<head>
    <script type="text/javascript">
	
        // set the 'format' parameter to true to format the output with commas
        function check_shortcut(el, format) {
			
            var output = el.value;
			
            output = output.replace("c", "00");
            output = output.replace("h", "00");
            output = output.replace("t", "000");
            output = output.replace("k", "000");
            output = output.replace("m", "000000");
            output = output.replace("b", "000000000");
			
            if (format) {
                output += '';
                x = output.split('.');
                x1 = x[0];
                x2 = x.length > 1 ? '.' + x[1] : '';
                var rgx = /(\d+)(\d{3})/;
                while (rgx.test(x1)) {
                    x1 = x1.replace(rgx, '$1' + ',' + '$2');
                }
                output = x1 + x2;
            }
			
            el.value = output;
			
        }
		
</script>

</head>
<body>
    <input type="text" name="number" value="" onkeyup="check_shortcut(this, true)" />
</body>
</html>

Credit to www.mredkj.com for the help with the formatting number

This entry was posted on Wednesday, May 12th, 2010 at 9:47 pm by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first