open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rework enforceInputRange

Browse Source 
* enforce only in onchange
* notify on valid input immediately
* highlight invalid values
This commit is contained in:
tophf 2017-04-13 09:12:40 +03:00
parent 3389812766
commit c09ee38c9e
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
dom.js
View File

@ -53,13 +53,16 @@ function animateElement(element, {className, remove = false}) {
function enforceInputRange(element) { function enforceInputRange(element) {
const min = Number(element.min); const min = Number(element.min);
const max = Number(element.max); const max = Number(element.max);
const onChange = () => { const doNotify = () => element.dispatchEvent(new Event('change', {bubbles: true}));
const value = Number(element.value); const onChange = ({type}) => {
if (value < min || value > max) { if (type == 'input' && element.checkValidity()) {
element.value = Math.max(min, Math.min(max, value)); doNotify();
} else if (type == 'change' && !element.checkValidity()) {
element.value = Math.max(min, Math.min(max, Number(element.value)));
doNotify();
} }
}; };
onChange(); onChange({});
element.addEventListener('change', onChange); element.addEventListener('change', onChange);
element.addEventListener('input', onChange); element.addEventListener('input', onChange);
} }

5
options/index.css
View File

@ -58,6 +58,11 @@ input[type=number] {
text-align: right; text-align: right;
} }
input[type=number]:invalid {
background-color: rgba(255, 0, 0, 0.1);
color: darkred;
}
#actions { #actions {
margin-top: -2em; margin-top: -2em;
} }