html-numeric-input/index.html at master · lockevn/html-numeric-input · GitHub

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>

<head>
    <title>Lockevn@Gurucore: textbox allow numeric input only</title>
    <style>
        body {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }

        input {
            padding: 1rem;
            font-size: 2rem;
            font-family: Consolas, Courier New, Courier, monospace;
            width: 80%;
        }
    </style>
</head>

<body>
    <h1>This textbox allow numeric value only</h1>
    <label>
        Number, dot, and minus sign:
        <input type="text" name="num" id="num" />
    </label>
    <ul>
        <li>Allow positive and negative number</li>
        <li>Allow decimal number (with default decimalSeparator is the dot)</li>
        <li>While user typing, it will remove all decimalSeparator that have other decimalSeparator following. After this processing, only the last decimalSeparator is kept.</li>
        <li>This is vanilla JS, no other library required</li>
        <li>Tested on Chrome, Firefox, IE10, IE11</li>
        <li>Tested on Windows, the keycodes is taken from http://keycode.info</li>
    </ul>

    <h1>What do I provide?</h1>
    <div>
        This is just a JS function <code>toHtmlNumericInput(string, bool)</code>. Copy it to your page and that's all.
    </div>

    <h1>How to use</h1>
    <p>
        Call <code>toHtmlNumericInput('num');</code>     // by default, DOT is the decimalSeparator, you can type "123456.789"
    </p>
    <p>
        Call <code>toHtmlNumericInput('num', true);</code> // if you want to use COMMA as decimalSeparator, you can type "123456,789"
    </p>
    <p>
        A working sample and how to use in action is <a href="https://rawgit.com/lockevn/html-numeric-input/master/index.html">here on Github</a>
    </p>


    <script type='text/javascript'>
        toHtmlNumericInput('num');

        // call this function with the id of the input textbox you want to be html-numeric-input
        // by default, decimal separator is '.', you can force to use comma with the second parameter = true
        function toHtmlNumericInput(inputElementId, useCommaAsDecimalSeparator) {
            var textbox = document.getElementById(inputElementId);

            // called when key is pressed
            // in keydown, we get the keyCode
            // in keyup, we get the input.value (including the charactor we've just typed
            textbox.addEventListener("keydown", function _OnNumericInputKeyDown(e) {
                var key = e.which || e.keyCode; // http://keycode.info/

                if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
                    // alphabet
                    key >= 65 && key <= 90 ||
                    // spacebar
                    key == 32) {
                    e.preventDefault();
                    return false;
                }

                if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
                    // numbers
                    key >= 48 && key <= 57 ||
                    // Numeric keypad
                    key >= 96 && key <= 105 ||

                    // allow: Ctrl+A
                    (e.keyCode == 65 && e.ctrlKey === true) ||
                    // allow: Ctrl+C
                    (key == 67 && e.ctrlKey === true) ||
                    // Allow: Ctrl+X
                    (key == 88 && e.ctrlKey === true) ||

                    // allow: home, end, left, right
                    (key >= 35 && key <= 39) ||
                    // Backspace and Tab and Enter
                    key == 8 || key == 9 || key == 13 ||
                    // Del and Ins
                    key == 46 || key == 45) {
                    return true;
                }


                var v = this.value; // v can be null, in case textbox is number and does not valid
                // if minus, dash
                if (key == 109 || key == 189) {
                    // if already has -, ignore the new one
                    if (v[0] === '-') {
                        // console.log('return, already has - in the beginning');
                        return false;
                    }
                }

                if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
                    // comma, period and numpad.dot
                    key == 190 || key == 188 || key == 110) {
                    // console.log('already having comma, period, dot', key);
                    if (/[\.,]/.test(v)) {
                        // console.log('return, already has , . somewhere');
                        return false;
                    }
                }
            });

            textbox.addEventListener("keyup", function _OnNumericInputKeyUp(e) {
                var v = this.value;

                if(false) {
                // if (+v) {
                    // this condition check if convert to number success, let it be
                    // put this condition will have better performance
                    // but I haven't test it with cultureInfo = comma decimal separator, so, to support both . and , as decimalSeparator, I remove this condition
                    //                      "1000"  "10.9"  "1,000.9"   "011"   "10c"   "$10"
                    //+str, str*1, str-0    1000    10.9    NaN         11      NaN     NaN
                } else if (v) {
                    // refine the value

                    // this replace also remove the -, we add it again if needed
                    v = (v[0] === '-' ? '-' : '') +
                        (useCommaAsDecimalSeparator ?
                            v.replace(/[^0-9\,]/g, '') :
                            v.replace(/[^0-9\.]/g, ''));

                    // remove all decimalSeparator that have other decimalSeparator following. After this processing, only the last decimalSeparator is kept.
                    if(useCommaAsDecimalSeparator){
                        v = v.replace(/,(?=(.*),)+/g, '');
                    } else {
                        v = v.replace(/\.(?=(.*)\.)+/g, '');
                    }

                    //console.log(this.value, v);
                    this.value = v; // update value only if we changed it
                }
            });

        }
    </script>

</body>

</html>