can/demos/forms/bindings-on-input-value-to.html

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

<on-input-name></on-input-name>

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

class OnInputName extends StacheElement {
    static view = `
        <label>
            Name:
            <input type="text" value:from="this.name" on:input:value:to="this.name">
        </label>

        <p>Given name: {{ name }}</p>

        <label>
            Name:
            <input type="text" value:from="this.name" on:input:value:to="this.name">
        </label>
    `;

    static props = {
        name: "Jake"
    };
};
customElements.define("on-input-name", OnInputName);
</script>