Skip to content

Instantly share code, notes, and snippets.

@adinan-cenci

adinan-cenci/index.html

Created December 10, 2019 00:18
Show Gist options
  • Save adinan-cenci/a0bdc7bd082297895b5421ab4e179232 to your computer and use it in GitHub Desktop.
Save adinan-cenci/a0bdc7bd082297895b5421ab4e179232 to your computer and use it in GitHub Desktop.
Download ZIP
Restring input number
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Restring number input</title>
</head>
<body>
<p>
This input elements are restringed by multiples of the number in the [ multiple ] attribute.
</p>
<p>
Try to change them, the value will be round up to the nearest multiple of the attribute.
</p>
<table>
<tr>
<th>Initial value</th>
<th>Step</th>
<th>Only multiples of</th>
<th></th>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td><input type="number" value="5" step="5" multiple="5" /></td>
</tr>
<tr>
<td>1.75</td>
<td>1.75</td>
<td>1.75</td>
<td><input type="number" value="1.75" step="1.75" multiple="1.75" /></td>
</tr>
<tr>
<td>12</td>
<td>10</td>
<td>10</td>
<td><input type="number" value="12" step="10" multiple="10" /></td>
</tr>
</table>
</body>
</html>
Raw
script.js
function parseNumber(text)
{
text = text.replace(/\.([0-9]+)0$/, '.$1'); // remove trailing zeroes
var float = parseFloat(text);
var integer = parseInt(text);
return String(float) == text ? float : integer;
}
function roundToNearestMultiple(number, multiple)
{
if (number % multiple == 0) {
return number;
}
return multiple * Math.round(number / multiple);
}
function roundInput(input)
{
var currentValue = parseNumber(input.value);
var multiple = parseNumber(input.getAttribute('multiple'));
var previousValue = input.previousValue || 0;
if (currentValue == previousValue) {
return;
}
input.value = roundToNearestMultiple(currentValue, multiple);
}
function restringeNumberInputElement(input)
{
input.addEventListener('keydown', function(e)
{
if (! ['ArrowDown', 'ArrowUp'].includes(e.key)) {
return;
}
this.previousValue = parseNumber(this.value);
});
input.addEventListener('mousedown', function(e)
{
this.previousValue = parseNumber(this.value);
});
//----------------
input.addEventListener('keyup', function(e)
{
if (! ['ArrowDown', 'ArrowUp'].includes(e.key)) {
return;
}
roundInput(this);
});
input.addEventListener('blur', function(e)
{
roundInput(this);
});
var v = parseNumber(input.value);
var m = parseNumber(input.getAttribute('multiple'));
var r = roundToNearestMultiple(v, m);
input.setAttribute('value', r);
input.value = v;
}
document.querySelectorAll('input[type=number][multiple]').forEach((input) =>
{
restringeNumberInputElement(input);
});
Raw
style.css
body { margin: 0px; padding: 20px; font-family: 'Roboto', 'Arial'; background-color: #000; color: #eee; }
p {margin: 0px auto 20px auto;}
table { border-collapse: collapse; }
th, td { padding: 10px; border: solid 1px #8153fb; }
th { background-color: #b5b5ff; color: #000; }
input { min-width: 0px; width: 70px; padding: 14px; border: solid 2px #b5b5ff; font-size: 16px; line-height: 1em; color: #fff; background-color: #333; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment