Good morning, I am new to Javascript and was trying to get the following code to work like so. On page load the PIN field would be auto clicked and the javascript numpad would open automatically. I have tried the .click() method but it would not launch the numpad but would work on an alert. Any help would be greatly appreciated!
*Disregard the FileMaker code as it will cause an error on the console but works when viewed in FileMaker.
CODE
Javascript Numpad
<!-- (A) LOAD JS + CSS -->
<!--
<link rel="stylesheet" href="numpad-light.css"/>
-->
<style>
/* html*/
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
background-color: #494949;
}
body {
display: table;
}
.my-block {
text-align: center;
display: table-cell;
vertical-align: middle;
font-family: Verdana;
font-size: 200%;
color: white;
}
/* (A) WRAPPER */
#numWrap {
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0; left: 0;
z-index: 999;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s;
}
#numWrap.open {
opacity: 1;
visibility: visible;
}
/* (B) NUMPAD */
#numPad {
max-width: 350px;
background: #151515;
margin: 50vh auto 0 auto;
transform: translateY(-50%);
padding: 10px;
}
/* (C) DISPLAY */
#numDisplay {
box-sizing: border-box;
width: 100%;
border: 0;
padding: 5px;
margin-bottom: 10px;
background: #000000;
color: #ffffff;
font-size: 56px;
text-align: center;
}
#numDisplay:focus { outline: none; }
#numDisplay::selection { background: none; }
/* (D) BUTTONS WRAPPER */
#numBWrap {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 5px;
}
/* (E) BUTTONS */
#numBWrap div {
font-size: 56px;
color: #ffffff;
text-align: center;
padding: 20px 0;
font-family: Verdana;
font-style: oblique;
}
#numBWrap div:hover { cursor: pointer; }
#numBWrap .num, #numBWrap .zero, #numBWrap .dot { background: #565656; }
#numBWrap .zero { grid-column: span 2; }
#numBWrap .del, #numBWrap .clr { background: #333; }
#numBWrap .cx { background: #940909; }
#numBWrap .cx { color: #ffffff; }
#numBWrap .ok { background: #66B132; }
#numBWrap .ok { color: #ffffff; }
/* No decimal points allowed */
#numBWrap.noDec .dot { display: none; }
#numBWrap.noDec .zero { grid-column: span 3; }
</style>
<script>
var numpad = {
// (A) CREATE NUMPAD HTML
hwrap: null, // numpad wrapper container
hpad: null, // numpad itself
hdisplay: null, // number display
hbwrap: null, // buttons wrapper
hbuttons: {}, // individual buttons
init: () => {
// (A1) WRAPPER
numpad.hwrap = document.createElement("div");
numpad.hwrap.id = "numWrap";
// (A2) ENTIRE NUMPAD ITSELF
numpad.hpad = document.createElement("div");
numpad.hpad.id = "numPad";
numpad.hwrap.appendChild(numpad.hpad);
// (A3) DISPLAY
numpad.hdisplay = document.createElement("input");
numpad.hdisplay.id = "numDisplay";
numpad.hdisplay.type = "text";
numpad.hdisplay.disabled = true;
numpad.hdisplay.value = "0";
numpad.hpad.appendChild(numpad.hdisplay);
// (A4) NUMBER BUTTONS
numpad.hbwrap = document.createElement("div");
numpad.hbwrap.id = "numBWrap";
numpad.hpad.appendChild(numpad.hbwrap);
// (A5) BUTTONS
let buttonator = (txt, css, fn) => {
let button = document.createElement("div");
button.innerHTML = txt;
button.classList.add(css);
button.onclick = fn;
numpad.hbwrap.appendChild(button);
numpad.hbuttons[txt] = button;
};
// 7 TO 9
for (let i=7; i<=9; i++) { buttonator(i, "num", () => { numpad.digit(i); }); }
// BACKSPACE
buttonator("⤆", "del", numpad.delete);
// 4 TO 6
for (let i=4; i<=6; i++) { buttonator(i, "num", () => { numpad.digit(i); }); }
// CLEAR
buttonator("C", "clr", numpad.reset);
// 1 to 3
for (let i=1; i<=3; i++) { buttonator(i, "num", () => { numpad.digit(i); }); }
// CANCEL
buttonator("✖", "cx", () => { numpad.hide(1); });
// 0
buttonator(0, "zero", () => { numpad.digit(0); });
// .
buttonator(".", "dot", numpad.dot);
// OK
buttonator("✔", "ok", numpad.select);
// (A6) ATTACH NUMPAD TO HTML BODY
document.body.appendChild(numpad.hwrap);
},
// (B) BUTTON ACTIONS
// (B1) CURRENTLY SELECTED FIELD + MAX LIMIT
nowTarget: null, // Current selected input field
nowMax: 0, // Current max allowed digits
// (B2) NUMBER (0 TO 9)
digit: (num) => {
let current = numpad.hdisplay.value;
if (current.length < numpad.nowMax) {
if (current=="0") { numpad.hdisplay.value = num; }
else { numpad.hdisplay.value += num; }
}
},
// (B3) ADD DECIMAL POINT
dot: () => {
if (numpad.hdisplay.value.indexOf(".") == -1) {
if (numpad.hdisplay.value=="0") { numpad.hdisplay.value = "0."; }
else { numpad.hdisplay.value += "."; }
}
},
// (B4) BACKSPACE
delete: () => {
var length = numpad.hdisplay.value.length;
if (length == 1) { numpad.hdisplay.value = 0; }
else { numpad.hdisplay.value = numpad.hdisplay.value.substring(0, length - 1); }
},
// (B5) CLEAR ALL
reset: () => { numpad.hdisplay.value = ""; },
// (B6) OK - SET VALUE
select: () => {
numpad.nowTarget.value = numpad.hdisplay.value;
numpad.hide();
numpad.nowTarget.dispatchEvent(new Event("numpadok"));
},
// (C) ATTACH NUMPAD TO INPUT FIELD
attach: (opt) => {
// OPTIONS
// target: required, target field.
// max: optional, maximum number of characters. Default 255.
// decimal: optional, allow decimal? Default true.
// onselect: optional, function to call after selecting number.
// oncancel: optional, function to call after canceling.
// (C1) DEFAULT OPTIONS
if (opt.max === undefined) { opt.max = 255; }
if (opt.decimal === undefined) { opt.decimal = true; }
// (C2) GET + SET TARGET OPTIONS
opt.target.readOnly = true; // PREVENT ONSCREEN KEYBOARD
opt.target.dataset.max = opt.max;
opt.target.dataset.decimal = opt.decimal;
opt.target.addEventListener("click", () => { numpad.show(opt.target); });
// (C3) ATTACH CUSTOM LISTENERS
if (opt.onselect) {
opt.target.addEventListener("numpadok", opt.onselect);
}
if (opt.oncancel) {
opt.target.addEventListener("numpadcx", opt.oncancel);
}
},
// (D) SHOW NUMPAD
show: (target) => {
// (D1) SET CURRENT DISPLAY VALUE
let cv = target.value;
if (cv == "") { cv = "0"; }
numpad.hdisplay.value = cv;
// (D2) SET MAX ALLOWED CHARACTERS
numpad.nowMax = target.dataset.max;
// (D3) SET DECIMAL
if (target.dataset.decimal == "true") {
numpad.hbwrap.classList.remove("noDec");
} else {
numpad.hbwrap.classList.add("noDec");
}
// (D4) SET CURRENT TARGET
numpad.nowTarget = target;
// (D5) SHOW NUMPAD
numpad.hwrap.classList.add("open");
},
// (E) HIDE NUMPAD
hide: (manual) => {
if (manual) { numpad.nowTarget.dispatchEvent(new Event("numpadcx")); }
numpad.hwrap.classList.remove("open");
}
};
window.addEventListener("DOMContentLoaded", numpad.init);
</script>
ENTER PIN
<!-- (C) ATTACH NUMPAD -->
<script>
window.addEventListener("load", () => {
// (C2) WITH ALL POSSIBLE OPTIONS
numpad.attach({
target: document.getElementById("pin"),
max: 6, // MAX 10 DIGITS
decimal: false, // NO DECIMALS ALLOWED
onselect : () => { // CALL THIS AFTER SELECTING NUMBER
const param = {
'field':document.getElementById('pin').value
};
FileMaker.PerformScript('Timeclock UI | Number Pad Enter', JSON.stringify(param))
; document.getElementById("pin").value='';
},
oncancel : () => { // CALL THIS AFTER CANCELING
document.getElementById('pin').value='';
const param = {
'field':document.getElementById('pin').value
};
FileMaker.PerformScript('Timeclock UI | Number Pad Cancel', JSON.stringify(param))
;
}
});
});
</script>
END OF CODE
The site I got the code from is https://code-boxx.com/pure-javascript-numeric-keypad/