From c09ee38c9e00693086f208e6354426664b1ebc33 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Thu, 13 Apr 2017 09:12:40 +0300
Subject: [PATCH] rework enforceInputRange

* enforce only in onchange
* notify on valid input immediately
* highlight invalid values
---
 dom.js            | 13 ++++++++-----
 options/index.css |  5 +++++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/dom.js b/dom.js
index c41f3bcc..e6b161ff 100644
--- a/dom.js
+++ b/dom.js
@@ -53,13 +53,16 @@ function animateElement(element, {className, remove = false}) {
 function enforceInputRange(element) {
   const min = Number(element.min);
   const max = Number(element.max);
-  const onChange = () => {
-    const value = Number(element.value);
-    if (value < min || value > max) {
-      element.value = Math.max(min, Math.min(max, value));
+  const doNotify = () => element.dispatchEvent(new Event('change', {bubbles: true}));
+  const onChange = ({type}) => {
+    if (type == 'input' && element.checkValidity()) {
+      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('input', onChange);
 }
diff --git a/options/index.css b/options/index.css
index 7ab692c2..6c8c7365 100644
--- a/options/index.css
+++ b/options/index.css
@@ -58,6 +58,11 @@ input[type=number] {
   text-align: right;
 }
 
+input[type=number]:invalid {
+  background-color: rgba(255, 0, 0, 0.1);
+  color: darkred;
+}
+
 #actions {
   margin-top: -2em;
 }