support keyboard parameter modification

contenteditable.js

@@ -0,0 +1,42 @@
+(function() {
+  var inputList = $$('.param');
+  var hiddenTextList = $$('.hidden-text');
+  function onInput(input, index) {
+    hiddenTextList[index].innerHTML = input.value || 0;
+  }
+  function onKeydown(event, input) {
+    if (event.key === '-' && input.value[0] === '-') {
+      event.preventDefault();
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      input.blur();
+    }
+  }
+
+  function onBlur(input, index) {
+    var xy = input.value;
+    if (isNaN(xy) || (!(index % 2) && (xy < 0 || xy > 1))) {
+      input.value = 0;
+    }
+    let text = [...inputList].reduce(function(_text, item) {
+      _text += item.value + ','
+      return _text;
+    }, '')
+    text = text.slice(0, -1)
+    updateBezier(text);
+    update();
+    updateDelayed();
+  }
+
+  inputList.forEach(function(input, index) {
+    input.addEventListener('keydown', function(event) {
+      onKeydown(event, input);
+    });
+    input.addEventListener('input', function(event) {
+      onInput(input, index);
+    });
+    input.addEventListener('blur', function() {
+      onBlur(input, index);
+    });
+  });
+})()

index.html

@@ -12,11 +12,33 @@
 
 <header>
 	<h1>
-		<a href="" class="permalink"><code>cubic-bezier(<span id="values"><span
-		 id="P1x" class="param">0</span>,<span
-		 id="P1y" class="param">0</span>,<span
-		 id="P2x" class="param">.25</span>,<span
-		 id="P2y" class="param">1</span></span>)</code></a>
+		<a href="" class="permalink">
+			<code>
+				<span>cubic-bezier(</span>
+				<div id="values">
+					<div class="input-wrapper">
+						<span class="hidden-text" aria-hidden="true"></span>
+						<input class="param" id="P1x" type="number" inputmode="decimal">
+					</div>
+					<span>,</span>
+					<div class="input-wrapper">
+						<span class="hidden-text" aria-hidden="true"></span>
+						<input class="param" id="P1y" type="number" inputmode="decimal">
+					</div>
+					<span>,</span>
+					<div class="input-wrapper">
+						<span class="hidden-text" aria-hidden="true"></span>
+						<input class="param" id="P2x" type="number" inputmode="decimal">
+					</div>
+					<span>,</span>
+					<div class="input-wrapper">
+						<span class="hidden-text" aria-hidden="true"></span>
+						<input class="param" id="P2y" type="number" inputmode="decimal">
+					</div>
+				</div>
+				<span>)</span>
+			</code>
+		</a>
 		<div id="copybuttons">
 			<button id="copy">Copy</button>
 			<button id="copyoptionstoggle">&#9662;</button>
@@ -88,6 +110,7 @@ <h1>
 <script src="environment.js"></script>
 <script src="cubic-bezier.js"></script>
 <script src="interaction.js"></script>
+<script src="contenteditable.js"></script>
 
 <script>_gaq = [['_setAccount', 'UA-25106441-3'], ['_trackPageview']];</script>
 <script src="https://www.google-analytics.com/ga.js" async></script>

interaction.js

@@ -176,14 +176,17 @@ bezierLibrary.curves = JSON.parse(localStorage.curves);
 
 bezierLibrary.render();
 
-if(location.hash) {
-	bezierCanvas.bezier = window.bezier = new CubicBezier(decodeURI(location.hash));
+function updateBezier(str) {
+	bezierCanvas.bezier = window.bezier = new CubicBezier(decodeURI(str));
 
 	var offsets = bezierCanvas.offsets;
 
 	P1.style.prop(offsets[0]);
 	P2.style.prop(offsets[1]);
 }
+if(location.hash) {
+	updateBezier(location.hash)
+}
 
 favicon.width = favicon.height = 16 * pixelDepth;
 
@@ -427,11 +430,13 @@ function update() {
 
 
 	updateCopyInputs();
-	var params = $$('.param', bezierCode), 
+	var params = $$('.param'), 
+		hiddenTextList = $$('.hidden-text'),
 		prettyOffsets = bezier.coordinates.toString().split(',');
-
-	for(var i=params.length; i--;) {
-		params[i].textContent = prettyOffsets[i]; 
+
+	for (var i=params.length; i--;) {
+		hiddenTextList[i].innerHTML = prettyOffsets[i];
+		params[i].value = prettyOffsets[i]; 
 	}
 }
 function updateCopyInputs(){

style.css

@@ -68,12 +68,58 @@ a:hover {
 	text-decoration: none;
 }
 
-	h1 > a {
-		font-size: clamp(1.2rem, 2vw + .75rem, 2.5rem);
-		white-space: nowrap;
-		color: inherit;
-		text-decoration: none;
-	}
+h1 > a {
+	font-size: clamp(1.2rem, 2vw + .75rem, 2.5rem);
+	white-space: nowrap;
+	color: inherit;
+	text-decoration: none;
+}
+h1 > a > code {
+	display: inline-flex;
+}
+
+.param,
+.hidden-text {
+	font-size: clamp(1.2rem, 2vw + .75rem, 2.5rem);
+	white-space: nowrap;
+	text-decoration: none;
+}
+
+.hidden-text {
+	visibility: hidden;
+	display: inline-block;
+	opacity: 0;
+	padding: 0 4px;
+	box-sizing: border-box;
+	min-width: clamp(1.2rem, 2vw + .75rem, 2.5rem);
+}
+
+#values {
+	display: flex;
+}
+
+.input-wrapper {
+	position: relative;
+}
+/* Remove spinner buttons for Chrome, Safari, Edge, Opera */
+.param::-webkit-outer-spin-button,
+.param::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+/* Remove spinner buttons for Firefox */
+.param {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	-moz-appearance: textfield;
+	min-width: clamp(1.2rem, 2vw + .75rem, 2.5rem);
+	border: none;
+	text-align: center;
+}
+
 
 button, .button {
 	padding: .3em .5em;