code-boxx/0-JS-NUMPAD.MD

## 0-JS-NUMPAD.MD

      
    Raw
  

              0-JS-NUMPAD.MD
            
          
    JAVASCRIPT NUMPAD

https://code-boxx.com/pure-javascript-numeric-keypad/
LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## 1-numpad.html
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Numpad</title>
    <style>
    *{font-family:Arial, Helvetica, sans-serif;box-sizing:border-box;}
    </style>

    <!-- (A) LOAD JS + CSS -->
    <link rel="stylesheet" href="3-numpad.css">
    <script src="2-numpad.js"></script>
  </head>
  <body>
    <!-- (B) INPUT FIELDS -->
    Field A: <input type="text" id="demoA">
    Field B: <textarea id="demoB"></textarea>

    <!-- (C) ATTACH NUMPAD -->
    <script>
    window.addEventListener("load", () => {
      // (C1) BASIC NUMPAD
      numpad.attach({ target: document.getElementById("demoA") });

      // (C2) WITH ALL POSSIBLE OPTIONS
      numpad.attach({
        target: document.getElementById("demoB"),
        maxDig : 6, // max digits (whole number), default 10
        maxDec : 0, // to disable decimal places
        onselect : num => alert(num), // call this on select
        oncancel : () => alert("DEMO B canceled.") // call this on cancel
      });
    });
    </script>
  </body>
</html>

## 2-numpad.js
var numpad = {
  // (A) PROPERTIES
  // (A1) HTML ELEMENTS
  hWrap: null,    // numpad wrapper container
  hDisplay: null, // number display
  now : null,     // current active instance

  // (B) INIT - CREATE NUMPAD HTML
  init: () => {
    // (B1) NUMPAD WRAPPER
    numpad.hWrap = document.createElement("div");
    numpad.hWrap.id = "numWrap";
    numpad.hWrap.innerHTML = `<div id="numPad">
      <input type="text" id="numDisplay" disabled="true" value="0">
      <div id="numBWrap"></div>
    </div>`;
    document.body.appendChild(numpad.hWrap);
    numpad.hDisplay = document.getElementById("numDisplay");

    // (B2) ATTACH BUTTONS
    let hbWrap = document.getElementById("numBWrap"),
    buttonator = (txt, css, fn) => {
      let button = document.createElement("div");
      button.innerHTML = txt;
      button.classList.add(css);
      button.onclick = fn;
      hbWrap.appendChild(button);
    };
    for (let i=7; i<=9; i++) { buttonator(i, "num", () => numpad.digit(i)); }
    buttonator("&#10502;", "del", numpad.delete);
    for (let i=4; i<=6; i++) { buttonator(i, "num", () => numpad.digit(i)); }
    buttonator("C", "clr", numpad.reset);
    for (let i=1; i<=3; i++) { buttonator(i, "num", () => numpad.digit(i)); }
    buttonator("&#10006;", "cx", () => numpad.hide(1));
    buttonator(0, "zero", () => numpad.digit(0));
    buttonator(".", "dot", numpad.dot);
    buttonator("&#10004;", "ok", numpad.select);
  },

  // (C) BUTTON ACTIONS
  // (C1) NUMBER (0 TO 9)
  digit: num => {
    // (C1-1) CURRENT VALUE
    let v = numpad.hDisplay.value;

    // (C1-2) WHOLE NUMBER (NO DECIMAL POINT)
    if (v.indexOf(".") == -1) { if (v.length < numpad.now.maxDig) {
      if (v=="0") { numpad.hDisplay.value = num; }
      else { numpad.hDisplay.value += num; }
    }}

    // (C1-3) DECIMAL POINT
    else { if (v.split(".")[1].length < numpad.now.maxDec) {
      numpad.hDisplay.value += num;
    }}
  },

  // (C2) ADD DECIMAL POINT
  dot: () => { if (numpad.hDisplay.value.indexOf(".") == -1) {
    if (numpad.hDisplay.value=="0") { numpad.hDisplay.value = "0."; }
    else { numpad.hDisplay.value += "."; }
  }},

  // (C3) 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); }
  },

  // (C4) CLEAR ALL
  reset: () => numpad.hDisplay.value = "0",

  // (C5) OK - SET VALUE
  select: () => {
    let v = numpad.hDisplay.value;
    numpad.now.target.value = v;
    numpad.hide();
    if (numpad.now.onselect) { numpad.now.onselect(v); }
  },

  // (D) SHOW NUMPAD
  show: instance => {
    // (D1) SET CURRENT INSTANCE + DISPLAY VALUE
    numpad.now = instance;
    let cv = instance.target.value;
    if (cv=="" || isNaN(cv)) { cv = "0"; }
    numpad.hDisplay.value = cv;

    // (D2) SET DECIMAL
    if (instance.maxDec==0) { numpad.hWrap.classList.add("noDec"); }
    else { numpad.hWrap.classList.remove("noDec") }

    // (D3) SHOW NUMPAD
    numpad.hWrap.classList.add("open");
  },

  // (E) HIDE/CLOSE NUMPAD
  hide: manual => {
    if (manual && numpad.now.oncancel) { numpad.now.oncancel(); }
    numpad.hWrap.classList.remove("open");
  },

  // (F) ATTACH NUMPAD TO INPUT FIELD
  //  target: required, target field.
  //  maxDig: optional, maximum number of digits, default 10.
  //  maxDec: optional, maximum number of decimal places, default 2.
  //  onselect: optional, function to call after selecting number.
  //  oncancel: optional, function to call after canceling.
  attach: instance => {
    // (F1) DEFAULT OPTIONS
    if (instance.maxDig === undefined) { instance.maxDig = 10; }
    if (instance.maxDec === undefined) { instance.maxDec = 2; }

    // (F2) GET + SET TARGET OPTIONS
    instance.target.readOnly = true; // prevent onscreen keyboard
    instance.target.addEventListener("click", () => numpad.show(instance));
  }
};
window.addEventListener("DOMContentLoaded", numpad.init);

## 3-numpad.css
/* (A) WRAPPER */
#numWrap, #numWrap * { box-sizing: border-box; }
#numWrap {
  /* (A1) FULL SCREEN COVER */
  position: fixed;
  top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100vh;

  /* (A2) HIDE BY DEFAULT */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;

  /* (A3) CENTER ON SCREEN + BACKGROUND COLOR */
  display: flex;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.7);
}

/* (A3) SHOW NUMPAD */
#numWrap.open {
  opacity: 1;
  visibility: visible;
}

/* (B) NUMPAD */
#numPad {
  max-width: 350px;
  padding: 10px;
  background: #151515;
}

/* (C) DISPLAY */
#numDisplay {
  width: 100%;
  border: 0;
  padding: 5px;
  margin-bottom: 10px;
  background: #000;
  color: #fff;
  font-size: 42px;
  text-align: right;
}
#numDisplay:focus { outline: none; }
#numDisplay::selection { background: none; }

/* (D) BUTTONS WRAPPER */
#numBWrap {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* (E) BUTTONS */
#numBWrap div {
  font-size: 24px;
  color: #fff;
  text-align: center;
  padding: 15px 0;
}
#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 .ok { background: #115296; }

/* (F) NO DECIMAL POINTS ALLOWED */
#numWrap.noDec .dot { display: none; }
#numWrap.noDec .zero { grid-column: span 3; }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Javascript Numpad</title>
	<style>
	*{font-family:Arial, Helvetica, sans-serif;box-sizing:border-box;}
	</style>

	<!-- (A) LOAD JS + CSS -->
	<link rel="stylesheet" href="3-numpad.css">
	<script src="2-numpad.js"></script>
	</head>
	<body>
	<!-- (B) INPUT FIELDS -->
	Field A: <input type="text" id="demoA">
	Field B: <textarea id="demoB"></textarea>

	<!-- (C) ATTACH NUMPAD -->
	<script>
	window.addEventListener("load", () => {
	// (C1) BASIC NUMPAD
	numpad.attach({ target: document.getElementById("demoA") });

	// (C2) WITH ALL POSSIBLE OPTIONS
	numpad.attach({
	target: document.getElementById("demoB"),
	maxDig : 6, // max digits (whole number), default 10
	maxDec : 0, // to disable decimal places
	onselect : num => alert(num), // call this on select
	oncancel : () => alert("DEMO B canceled.") // call this on cancel
	});
	});
	</script>
	</body>
	</html>
	var numpad = {
	// (A) PROPERTIES
	// (A1) HTML ELEMENTS
	hWrap: null, // numpad wrapper container
	hDisplay: null, // number display
	now : null, // current active instance

	// (B) INIT - CREATE NUMPAD HTML
	init: () => {
	// (B1) NUMPAD WRAPPER
	numpad.hWrap = document.createElement("div");
	numpad.hWrap.id = "numWrap";
	numpad.hWrap.innerHTML = `<div id="numPad">
	<input type="text" id="numDisplay" disabled="true" value="0">
	<div id="numBWrap"></div>
	</div>`;
	document.body.appendChild(numpad.hWrap);
	numpad.hDisplay = document.getElementById("numDisplay");

	// (B2) ATTACH BUTTONS
	let hbWrap = document.getElementById("numBWrap"),
	buttonator = (txt, css, fn) => {
	let button = document.createElement("div");
	button.innerHTML = txt;
	button.classList.add(css);
	button.onclick = fn;
	hbWrap.appendChild(button);
	};
	for (let i=7; i<=9; i++) { buttonator(i, "num", () => numpad.digit(i)); }
	buttonator("⤆", "del", numpad.delete);
	for (let i=4; i<=6; i++) { buttonator(i, "num", () => numpad.digit(i)); }
	buttonator("C", "clr", numpad.reset);
	for (let i=1; i<=3; i++) { buttonator(i, "num", () => numpad.digit(i)); }
	buttonator("✖", "cx", () => numpad.hide(1));
	buttonator(0, "zero", () => numpad.digit(0));
	buttonator(".", "dot", numpad.dot);
	buttonator("✔", "ok", numpad.select);
	},

	// (C) BUTTON ACTIONS
	// (C1) NUMBER (0 TO 9)
	digit: num => {
	// (C1-1) CURRENT VALUE
	let v = numpad.hDisplay.value;

	// (C1-2) WHOLE NUMBER (NO DECIMAL POINT)
	if (v.indexOf(".") == -1) { if (v.length < numpad.now.maxDig) {
	if (v=="0") { numpad.hDisplay.value = num; }
	else { numpad.hDisplay.value += num; }
	}}

	// (C1-3) DECIMAL POINT
	else { if (v.split(".")[1].length < numpad.now.maxDec) {
	numpad.hDisplay.value += num;
	}}
	},

	// (C2) ADD DECIMAL POINT
	dot: () => { if (numpad.hDisplay.value.indexOf(".") == -1) {
	if (numpad.hDisplay.value=="0") { numpad.hDisplay.value = "0."; }
	else { numpad.hDisplay.value += "."; }
	}},

	// (C3) 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); }
	},

	// (C4) CLEAR ALL
	reset: () => numpad.hDisplay.value = "0",

	// (C5) OK - SET VALUE
	select: () => {
	let v = numpad.hDisplay.value;
	numpad.now.target.value = v;
	numpad.hide();
	if (numpad.now.onselect) { numpad.now.onselect(v); }
	},

	// (D) SHOW NUMPAD
	show: instance => {
	// (D1) SET CURRENT INSTANCE + DISPLAY VALUE
	numpad.now = instance;
	let cv = instance.target.value;
	if (cv=="" \|\| isNaN(cv)) { cv = "0"; }
	numpad.hDisplay.value = cv;

	// (D2) SET DECIMAL
	if (instance.maxDec==0) { numpad.hWrap.classList.add("noDec"); }
	else { numpad.hWrap.classList.remove("noDec") }

	// (D3) SHOW NUMPAD
	numpad.hWrap.classList.add("open");
	},

	// (E) HIDE/CLOSE NUMPAD
	hide: manual => {
	if (manual && numpad.now.oncancel) { numpad.now.oncancel(); }
	numpad.hWrap.classList.remove("open");
	},

	// (F) ATTACH NUMPAD TO INPUT FIELD
	// target: required, target field.
	// maxDig: optional, maximum number of digits, default 10.
	// maxDec: optional, maximum number of decimal places, default 2.
	// onselect: optional, function to call after selecting number.
	// oncancel: optional, function to call after canceling.
	attach: instance => {
	// (F1) DEFAULT OPTIONS
	if (instance.maxDig === undefined) { instance.maxDig = 10; }
	if (instance.maxDec === undefined) { instance.maxDec = 2; }

	// (F2) GET + SET TARGET OPTIONS
	instance.target.readOnly = true; // prevent onscreen keyboard
	instance.target.addEventListener("click", () => numpad.show(instance));
	}
	};
	window.addEventListener("DOMContentLoaded", numpad.init);
	/* (A) WRAPPER */
	#numWrap, #numWrap * { box-sizing: border-box; }
	#numWrap {
	/* (A1) FULL SCREEN COVER */
	position: fixed;
	top: 0; left: 0; z-index: 999;
	width: 100vw; height: 100vh;

	/* (A2) HIDE BY DEFAULT */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s;

	/* (A3) CENTER ON SCREEN + BACKGROUND COLOR */
	display: flex;
	align-items: center; justify-content: center;
	background: rgba(0, 0, 0, 0.7);
	}

	/* (A3) SHOW NUMPAD */
	#numWrap.open {
	opacity: 1;
	visibility: visible;
	}

	/* (B) NUMPAD */
	#numPad {
	max-width: 350px;
	padding: 10px;
	background: #151515;
	}

	/* (C) DISPLAY */
	#numDisplay {
	width: 100%;
	border: 0;
	padding: 5px;
	margin-bottom: 10px;
	background: #000;
	color: #fff;
	font-size: 42px;
	text-align: right;
	}
	#numDisplay:focus { outline: none; }
	#numDisplay::selection { background: none; }

	/* (D) BUTTONS WRAPPER */
	#numBWrap {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* (E) BUTTONS */
	#numBWrap div {
	font-size: 24px;
	color: #fff;
	text-align: center;
	padding: 15px 0;
	}
	#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 .ok { background: #115296; }

	/* (F) NO DECIMAL POINTS ALLOWED */
	#numWrap.noDec .dot { display: none; }
	#numWrap.noDec .zero { grid-column: span 3; }