Make a good demo page to show the usage better
Jeremy D commited on 2021-10-13 16:43:37
Showing 3 changed files, with 234 additions and 31 deletions.
Fix a issue because focus was causing a issue when using the increase/decrease buttons Fix a Nan issue when the input is a number and the value is empty (NaN) Use MIN/MAX_SAFE_INTEGER instead. Fix an issue where if we are 0 or 0.000 (float/decimal), that we would have to clear the input box before we could start clicking numbers.
- demo.html 0000000..7f8a934
- jquery-numbercontrol.js 16f6379..e1dae4e
- test.html 944a97a..0000000
| ... | ... |
@@ -0,0 +1,222 @@ |
| 1 |
+<!DOCTYPE html> |
|
| 2 |
+<html> |
|
| 3 |
+<head> |
|
| 4 |
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
|
| 5 |
+ <title>JQuery Number Control with Virtual Keyboard</title> |
|
| 6 |
+ <meta name="robots" content="noindex, nofollow"> |
|
| 7 |
+ <meta name="googlebot" content="noindex, nofollow"> |
|
| 8 |
+ <meta name="viewport" content="width=device-width, initial-scale=1"> |
|
| 9 |
+ <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> |
|
| 10 |
+ <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css"> |
|
| 11 |
+ <link rel="stylesheet" type="text/css" href="./jquery-numbercontrol.css"> |
|
| 12 |
+</head> |
|
| 13 |
+<body> |
|
| 14 |
+ <ul class="nav nav-tabs mb-5"> |
|
| 15 |
+ <li class="nav-item"> |
|
| 16 |
+ <a class="nav-link active" data-tab="default">Default</a> |
|
| 17 |
+ </li> |
|
| 18 |
+ <li class="nav-item"> |
|
| 19 |
+ <a class="nav-link" data-tab="decimal">Decimal</a> |
|
| 20 |
+ </li> |
|
| 21 |
+ <li class="nav-item"> |
|
| 22 |
+ <a class="nav-link" data-tab="setvalue">Set Value</a> |
|
| 23 |
+ </li> |
|
| 24 |
+ <li class="nav-item"> |
|
| 25 |
+ <a class="nav-link" data-tab="highlight">Highlight</a> |
|
| 26 |
+ </li> |
|
| 27 |
+ </ul> |
|
| 28 |
+ |
|
| 29 |
+ <div id="content_containers"> |
|
| 30 |
+ <!-- Default number contorls --> |
|
| 31 |
+ <div id="viewbox_default"> |
|
| 32 |
+ <div class="col-sm-2"> |
|
| 33 |
+ <input type="text" id="numbercontrol_default" value="0" min="-500" max="500" /> |
|
| 34 |
+ </div> |
|
| 35 |
+ </div> |
|
| 36 |
+ |
|
| 37 |
+ <!-- Decimal example --> |
|
| 38 |
+ <div id="viewbox_decimal" style="display:none;"> |
|
| 39 |
+ <div class="col-sm-2"> |
|
| 40 |
+ <input type="text" id="numbercontrol_decimal" value="0" min="-10" max="10" step="0.01" /> |
|
| 41 |
+ </div> |
|
| 42 |
+ </div> |
|
| 43 |
+ |
|
| 44 |
+ <!-- Save another field exmaple --> |
|
| 45 |
+ <div id="viewbox_setvalue" style="display:none;"> |
|
| 46 |
+ <div class="row"> |
|
| 47 |
+ <div class="col-sm-2"> |
|
| 48 |
+ <input type="number" id="numbercontrol_setvalue" value="" min="-500" max="500" /> |
|
| 49 |
+ </div> |
|
| 50 |
+ <div class="col-sm-2 offset-sm-2"> |
|
| 51 |
+ <span id="setvalue_setbox"></span> |
|
| 52 |
+ </div> |
|
| 53 |
+ </div> |
|
| 54 |
+ </div> |
|
| 55 |
+ |
|
| 56 |
+ <!-- Highlight field exmaple --> |
|
| 57 |
+ <div id="viewbox_highlight" style="display:none;"> |
|
| 58 |
+ <div class="col-sm-2"> |
|
| 59 |
+ <input type="text" id="numbercontrol_highlight" value="" /> |
|
| 60 |
+ <datalist id="datalist_highlight"> |
|
| 61 |
+ <option value="101A">101A</option> |
|
| 62 |
+ <option value="102A">102A</option> |
|
| 63 |
+ <option value="102B">102B</option> |
|
| 64 |
+ <option value="103A">103A</option> |
|
| 65 |
+ <option value="103B">103B</option> |
|
| 66 |
+ <option value="201A">201A</option> |
|
| 67 |
+ <option value="201B">201B</option> |
|
| 68 |
+ <option value="202A">202A</option> |
|
| 69 |
+ <option value="203A">203A</option> |
|
| 70 |
+ <option value="204A">204A</option> |
|
| 71 |
+ <option value="205A">205A</option> |
|
| 72 |
+ <option value="207A">207A</option> |
|
| 73 |
+ <option value="209B">209B</option> |
|
| 74 |
+ </datalist> |
|
| 75 |
+ </div> |
|
| 76 |
+ </div> |
|
| 77 |
+ </div> |
|
| 78 |
+ |
|
| 79 |
+ <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> |
|
| 80 |
+ <script type="text/javascript" src="./jquery-numbercontrol.js"></script> |
|
| 81 |
+ <script type="text/javascript"> |
|
| 82 |
+ $(document).ready(function() {
|
|
| 83 |
+ // Not apart of the Number controls, but does the tabs. |
|
| 84 |
+ $('ul.nav a.nav-link').on('click', function(e) {
|
|
| 85 |
+ $('ul.nav a.nav-link').removeClass('active')
|
|
| 86 |
+ $(this).addClass('active');
|
|
| 87 |
+ |
|
| 88 |
+ $('#content_containers > div').css('display', 'none');
|
|
| 89 |
+ $('#content_containers > div#viewbox_' + $(this).data('tab')).css('display', '');
|
|
| 90 |
+ }); |
|
| 91 |
+ |
|
| 92 |
+ // The default number controls. |
|
| 93 |
+ $('#numbercontrol_default').numbercontrol();
|
|
| 94 |
+ |
|
| 95 |
+ // Fancy box for decimals. |
|
| 96 |
+ $('#numbercontrol_decimal').numbercontrol({
|
|
| 97 |
+ 'type': 'float', |
|
| 98 |
+ 'prependHtml': '', |
|
| 99 |
+ 'appendHtml': '', |
|
| 100 |
+ 'keyboardLayout': '<div class="modal-dialog modal-dialog-centered" style="width: 250px;">' + |
|
| 101 |
+ '<div class="modal-content">' + |
|
| 102 |
+ '<table>' + |
|
| 103 |
+ '<tr>' + |
|
| 104 |
+ '<td colspan="4">{INPUTBOX}</td>' +
|
|
| 105 |
+ '</tr><tr>' + |
|
| 106 |
+ '<td>{7}</td>' +
|
|
| 107 |
+ '<td>{8}</td>' +
|
|
| 108 |
+ '<td>{9}</td>' +
|
|
| 109 |
+ '<td>{DELETE}</td>' +
|
|
| 110 |
+ '</tr><tr>' + |
|
| 111 |
+ '<td>{4}</td>' +
|
|
| 112 |
+ '<td>{5}</td>' +
|
|
| 113 |
+ '<td>{6}</td>' +
|
|
| 114 |
+ '<td>{CLEAR}</td>' +
|
|
| 115 |
+ '</tr><tr>' + |
|
| 116 |
+ '<td>{1}</td>' +
|
|
| 117 |
+ '<td>{2}</td>' +
|
|
| 118 |
+ '<td>{3}</td>' +
|
|
| 119 |
+ '<td>{DONE}</td>' +
|
|
| 120 |
+ '</tr><tr>' + |
|
| 121 |
+ '<td colspan="2">{0}</td>' +
|
|
| 122 |
+ '<td>{SEP}</td>' +
|
|
| 123 |
+ '<td>{CANCEL}</td>' +
|
|
| 124 |
+ '</tr>' + |
|
| 125 |
+ '</table>' + |
|
| 126 |
+ '</div>' + |
|
| 127 |
+ '</div>' |
|
| 128 |
+ }); |
|
| 129 |
+ |
|
| 130 |
+ // Save our value to another box/notify something else. |
|
| 131 |
+ $('#numbercontrol_setvalue').numbercontrol({
|
|
| 132 |
+ 'onAfterSetNewvalue': function (that, event, container, value) {
|
|
| 133 |
+ $('#setvalue_setbox').html(value);
|
|
| 134 |
+ } |
|
| 135 |
+ }); |
|
| 136 |
+ |
|
| 137 |
+ |
|
| 138 |
+ // Example of how we can do a filtered highlight list for example of a room list. |
|
| 139 |
+ function filterRoomList(dataselector, value) |
|
| 140 |
+ {
|
|
| 141 |
+ if (typeof value === 'undefined') |
|
| 142 |
+ value = $('#numbercontrol_highlight').val();
|
|
| 143 |
+ |
|
| 144 |
+ var options = $(dataselector).find('option');
|
|
| 145 |
+ var optionVals = [], i = 0; |
|
| 146 |
+ |
|
| 147 |
+ for (i; i < options.length; i += 1) {
|
|
| 148 |
+ optionVals.push(options[i].value); |
|
| 149 |
+ } |
|
| 150 |
+ |
|
| 151 |
+ if (value.length > -1) {
|
|
| 152 |
+ optionVals = optionVals.filter(function (element, index, array) {
|
|
| 153 |
+ if (value == element.substring(0, value.length)) {
|
|
| 154 |
+ return true; |
|
| 155 |
+ } |
|
| 156 |
+ return false; |
|
| 157 |
+ }); |
|
| 158 |
+ } |
|
| 159 |
+ |
|
| 160 |
+ var IDs = optionVals.map((optionVals) => optionVals[value.length]).join('');
|
|
| 161 |
+ var IDsUnique = [...new Set(IDs)]; |
|
| 162 |
+ |
|
| 163 |
+ $('.numberControlVirtualNumPad td > button').removeClass('btn-primary').addClass('btn-outline-secondary');
|
|
| 164 |
+ IDsUnique.forEach(function (index, number) {
|
|
| 165 |
+ $('td#kv' + index + ' > button').addClass('btn-primary').removeClass('btn-outline-secondary');
|
|
| 166 |
+ }); |
|
| 167 |
+ } |
|
| 168 |
+ $('#numbercontrol_highlight').numbercontrol({
|
|
| 169 |
+ 'type': 'text', |
|
| 170 |
+ 'prependHtml': '', |
|
| 171 |
+ 'appendHtml': '', |
|
| 172 |
+ 'bindButtonEvents': 'click tap touch', |
|
| 173 |
+ 'buttons': [...Array(10).keys(), 'DELETE', 'CLEAR', 'DONE', 'CANCEL', 'UP', 'DOWN', 'SEP', 'INVERSE', 'A', 'B', 'C'], |
|
| 174 |
+ 'onAfterVirtualKeyboardOpen': function () {
|
|
| 175 |
+ filterRoomList('#datalist_highlight');
|
|
| 176 |
+ }, |
|
| 177 |
+ 'onAfterSetNewvalue': function (that, event, container, value) {
|
|
| 178 |
+ filterRoomList('#datalist_highlight', value);
|
|
| 179 |
+ }, |
|
| 180 |
+ 'onAfterVirtualKeyboardButton': function (that, event, thisFunction) {
|
|
| 181 |
+ if (thisFunction == 'DELETE' || thisFunction == 'CLEAR') |
|
| 182 |
+ filterRoomList('#datalist_highlight');
|
|
| 183 |
+ }, |
|
| 184 |
+ 'keyboardLayout': '<div class="modal-dialog modal-dialog-centered">' + |
|
| 185 |
+ '<div class="modal-content">' + |
|
| 186 |
+ '<table>' + |
|
| 187 |
+ '<tr>' + |
|
| 188 |
+ '<td colspan="4">{INPUTBOX}</td>' +
|
|
| 189 |
+ '</tr><tr>' + |
|
| 190 |
+ '<td id="kv7">{7}</td>' +
|
|
| 191 |
+ '<td id="kv8">{8}</td>' +
|
|
| 192 |
+ '<td id="kv9">{9}</td>' +
|
|
| 193 |
+ '<td>{DELETE}</td>' +
|
|
| 194 |
+ '</tr><tr>' + |
|
| 195 |
+ '<td id="kv4">{4}</td>' +
|
|
| 196 |
+ '<td id="kv5">{5}</td>' +
|
|
| 197 |
+ '<td id="kv6">{6}</td>' +
|
|
| 198 |
+ '<td>{CLEAR}</td>' +
|
|
| 199 |
+ '</tr><tr>' + |
|
| 200 |
+ '<td id="kv1">{1}</td>' +
|
|
| 201 |
+ '<td id="kv2">{2}</td>' +
|
|
| 202 |
+ '<td id="kv3">{3}</td>' +
|
|
| 203 |
+ '<td>{DONE}</td>' +
|
|
| 204 |
+ '</tr><tr>' + |
|
| 205 |
+ '<td id="kv0">{0}</td>' +
|
|
| 206 |
+ '<td id="kvA">{A}</td>' +
|
|
| 207 |
+ '<td id="kvB">{B}</td>' +
|
|
| 208 |
+ '<td>{CANCEL}</td>' +
|
|
| 209 |
+ '</tr><tr>' + |
|
| 210 |
+ '<td id="kvC">{C}</td>' +
|
|
| 211 |
+ '<td></td>' + |
|
| 212 |
+ '<td></td>' + |
|
| 213 |
+ '<td></td>' + |
|
| 214 |
+ '</tr>' + |
|
| 215 |
+ '</table>' + |
|
| 216 |
+ '</div>' + |
|
| 217 |
+ '</div>' |
|
| 218 |
+ }); |
|
| 219 |
+ }); |
|
| 220 |
+ </script> |
|
| 221 |
+</body> |
|
| 222 |
+</html> |
|
| 0 | 223 |
\ No newline at end of file |
| ... | ... |
@@ -58,7 +58,7 @@ |
| 58 | 58 |
inputParentCss: 'input-group numberControl', |
| 59 | 59 |
inputParent: 'div', |
| 60 | 60 |
inputCss: 'numberControlInput form-control px-1', |
| 61 |
- bindButtonEvents: 'click tap touch touchstart focus', |
|
| 61 |
+ bindButtonEvents: 'click tap touch touchstart', |
|
| 62 | 62 |
keyboardLanguage: {
|
| 63 | 63 |
'UP' : '<span class="oi oi-chevron-top" />', |
| 64 | 64 |
'DOWN' : '<span class="oi oi-chevron-bottom" />', |
| ... | ... |
@@ -82,7 +82,13 @@ |
| 82 | 82 |
if (Number.MIN_VALUE == parseFloat(value) && $(container).val() == '') |
| 83 | 83 |
return false; |
| 84 | 84 |
|
| 85 |
- if (options.type === 'number') |
|
| 85 |
+ // No Nans. |
|
| 86 |
+ if (options.type !== 'text' && isNaN(value)) |
|
| 87 |
+ value = 0; |
|
| 88 |
+ |
|
| 89 |
+ if (options.type === 'text') |
|
| 90 |
+ $(container).val(value); |
|
| 91 |
+ else if (options.type === 'number') |
|
| 86 | 92 |
$(container).val(parseInt(value)); |
| 87 | 93 |
else |
| 88 | 94 |
$(container).val(parseFloat(value)); |
| ... | ... |
@@ -141,8 +147,8 @@ |
| 141 | 147 |
// Some settings we either can pull in from a options, from standard attributes or defaults. |
| 142 | 148 |
var $step = findMinMaxValue(parseFloat(options.step), parseFloat($base.attr('step')), 1);
|
| 143 | 149 |
var $percision = precision($step) + 1; |
| 144 |
- var $minValue = findMinMaxValue(options.min, $base.attr('min'), Number.MIN_VALUE);
|
|
| 145 |
- var $maxValue = findMinMaxValue(options.max, $base.attr('max'), Number.MAX_VALUE);
|
|
| 150 |
+ var $minValue = findMinMaxValue(options.min, $base.attr('min'), Number.MIN_SAFE_INTEGER);
|
|
| 151 |
+ var $maxValue = findMinMaxValue(options.max, $base.attr('max'), Number.MAX_SAFE_INTEGER);
|
|
| 146 | 152 |
|
| 147 | 153 |
// Build the parent up. |
| 148 | 154 |
if (!$($base).parent().is('div') || !$($base).parent().hasClass('numberControlDestoryed')) {
|
| ... | ... |
@@ -326,6 +332,8 @@ |
| 326 | 332 |
default: |
| 327 | 333 |
if ($(this).attr('data-custom-function'))
|
| 328 | 334 |
$(this).attr('data-custom-function')(this, event, thisFunction);
|
| 335 |
+ else if ($VirtualKeyboardInput.val() == '0' || $VirtualKeyboardInput.val() == '0.000') |
|
| 336 |
+ setNewValue($VirtualKeyboardInput, $(this).attr('data-function'));
|
|
| 329 | 337 |
else |
| 330 | 338 |
setNewValue($VirtualKeyboardInput, $VirtualKeyboardInput.val().toString() + $(this).attr('data-function'));
|
| 331 | 339 |
} |
| ... | ... |
@@ -1,27 +0,0 @@ |
| 1 |
-<!DOCTYPE html> |
|
| 2 |
-<html> |
|
| 3 |
-<head> |
|
| 4 |
- <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
|
| 5 |
- <title>JQuery Number Control with Virtual Keyboard</title> |
|
| 6 |
- <meta name="robots" content="noindex, nofollow"> |
|
| 7 |
- <meta name="googlebot" content="noindex, nofollow"> |
|
| 8 |
- <meta name="viewport" content="width=device-width, initial-scale=1"> |
|
| 9 |
- <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> |
|
| 10 |
- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css"> |
|
| 11 |
- <link rel="stylesheet" type="text/css" href="./jquery-numbercontrol.css"> |
|
| 12 |
-</head> |
|
| 13 |
-<body> |
|
| 14 |
-<br><br><br><br><br><br><br><br><br><br> |
|
| 15 |
- <div class="col-sm-2"> |
|
| 16 |
- <input type="text" id="numbercontrol" value="1" min="-500" max="500" /> |
|
| 17 |
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> |
|
| 18 |
- <script type="text/javascript" src="./jquery-numbercontrol.js"></script> |
|
| 19 |
- <script type="text/javascript"> |
|
| 20 |
- $(document).ready(function() {
|
|
| 21 |
- console.log('loading');
|
|
| 22 |
- $('#numbercontrol').numbercontrol();
|
|
| 23 |
- }); |
|
| 24 |
- </script> |
|
| 25 |
- </div> |
|
| 26 |
-</body> |
|
| 27 |
-</html> |
|
| 28 | 0 |
\ No newline at end of file |
| 29 | 1 |