can/demos/forms/elements-number.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<number-inputs></number-inputs>

<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty" id="demo-source">
import { StacheElement, type } from "can";

class NumberInputs extends StacheElement {
    static view = `
        <label>
            Number (type: "number"):
            <input type="number" value:from="this.favoriteNumber" on:input:value:to="this.favoriteNumber">
        </label>
        <p>
            Number (type:"number"):
             {{# eq(typeof(this.favoriteNumber), "string" }}
                 "{{ this.favoriteNumber }}"
             {{ else }}
                 {{ this.favoriteNumber }}
             {{/ eq }}
        </p>
        <label>
            Number (type: "any"):
            <input type="number" value:from="this.favoriteNumberAnyType" on:input:value:to="this.favoriteNumberAnyType">
        </label>
        <p>
            Number (type: "any"):
             {{# eq(typeof(this.favoriteNumberAnyType), "string" }}
                 "{{ this.favoriteNumberAnyType }}"
             {{ else }}
                 {{ this.favoriteNumberAnyType }}
             {{/ eq }}
        </p>
    `;

    static props = {
        favoriteNumber: type.maybeConvert(Number),
        favoriteNumberAnyType: type.Any
    };

    typeof(val) {
        return typeof val;
    }
};
customElements.define("number-inputs", NumberInputs);
</script>