<​calc-input>, a custom input element that accepts mathematical formulas

https://www.bram.us/wordpress/wp-content/uploads/2026/10/calc-input.mp4Recording of the <calc-input> demo. Continuing my streak of small form-related Custom Elements (like <rich-input>), I built <calc-input>. It’s a custom input element that accepts mathematical formulas — such as 2 + 3 or (2 + 3) * 4 — and automatically toggles between showing the formula on focus and the calculated result on blur. ~ # The need for a smarter numeric input field I’m currently building a web app that has a lot of numeric inputs whose values need to be sourced from a different document. Sometimes filling in a field is a direct copy-paste of a number, but oftentimes there’s a calculation that needs to be done first — like taking one number, dividing it by 3, and subtracting another number from it. With a standard <input> element, doing this means constantly round-tripping to a separate calculator app, crunching the numbers there, and copying the result back into the browser. Even worse: if you come back…