<calc-input>

A custom input element that accepts mathematical formulas (such as 2 + 3 or (2 + 3) * 4). Upon blurring the input, the field displays the calculated result (5 or 20), and upon re-focusing it shows the original formula again.

Behind the scenes, <calc-input name="size"> renders three <input type="text"> elements (name="size", name="size--formula", and name="size--result") so standard HTML <form> submissions and constraint validation work seamlessly out of the box.

👉 Live Demo & Documentation: https://calc-input.netlify.app

Features

• Focus / Blur Formula Switching: Shows the evaluated result on blur and restores the formula on focus. The user never sees more than one input at a time.
• Configurable Form Submission: Control what gets sent to the server via the submit attribute: send only the formula (submit="formula-only"), only the result (submit="result-only"), or all values (submit="formula" or submit="result", with your preferred format in the original <name> input).
• Configurable Separator: Customize the -- separator in name--formula and name--result using the separator attribute (e.g. separator="_" or separator="").
• Complex Formula Support: Evaluates +, -, *, /, %, ^ / **, nested parentheses (2 + 3) * 4, unary operators, decimals, scientific notation, and standard math functions (sqrt, abs, round, min, max, pow, etc.) using a safe recursive-descent parser without eval().
• Invalid Formula Handling & Native Form Validation: When an unparsable formula is entered (e.g. 2 + ), blurring keeps showing the original formula with invalid styling (red border) and sets setCustomValidity() to prevent form submission.
• Clean DOM Attributes: Set an initial formula via the value attribute (e.g. <calc-input name="size" value="2 + 3">) without writing user-entered values back into the DOM attributes.

Component Anatomy

<calc-input name="size" value="2 + 3">
├─ <input type="text" name="size" hidden>
├─ <input type="text" name="size--formula" hidden>
└─ <input type="text" name="size--result">

Quick Start

1. Installation

npm install calc-input

2. Usage

<script type="module" src="calc-input"></script>

<form>
  <calc-input name="size" value="2 + 3"></calc-input>
  <button type="submit">Submit</button>
</form>

Attributes & Configuration

| Attribute | Default | Description | |---|---|---| | name | "" | Base name for the three underlying <input type="text"> elements: <name>, <name><separator>formula, and <name><separator>result. | | value | "" | Initial formula string (e.g. value="2 + 3"). Parsed on load without writing subsequent user edits back into the DOM attribute. | | submit | "formula" | Controls what <input type="text" name="<name>"> contains ("formula", "result", "formula-only", or "result-only"). When set to "formula-only" or "result-only", the --formula and --result fields are not submitted. | | separator | "--" | Separator used for the formula and result input names. Empty string separator="" is supported. | | placeholder | "" | Placeholder forwarded to the inner inputs. | | disabled / readonly / required | false | Standard form attributes forwarded to the inner inputs. |

Development & Testing

# Start local demo server
npm start

# Run unit and end-to-end Puppeteer tests
npm test

# Build ./dist for publishing
npm run build

License

MIT © Bramus Van Damme