be-committed

be-committed encapsulates and makes declarative a snippet of code that is likely found frequently in various web sites. In particular, trigger a button click on keyboard "enter."

Syntax

<label for=url>Enter Url</label>
<input id=url be-committed='{"to": "change"}'>
<button id=change>Search</button>

<script type=module crossorigin>
    import '//cdn.skypack.dev/be-committed/be-committed.js';
</script>

You can stick to 100% kosher HTML syntax as well:

<label for=url>Enter Url</label>
<input id=url data-be-committed=to-change>
<button id=to-change>Search</button>

<script type=module crossorigin>
    import '//cdn.skypack.dev/be-committed/be-committed.js';
</script>

Referencing the module, as shown above, only affects input elements outside any ShadowDOM realm.

To affect elements within a ShadowDOM realm, add an instance of the be-committed web component inside the ShadowDOM realm. Or use be-hive for a more elegant approach.

What this does:

If you set focus on the input element, start typing, and click enter, it clicks on the "Search" button.

Running locally

1. Do a git clone or a git fork of repository https://github.com/bahrus/be-committed
2. Install node.js
3. Run "npm install" from location of folder created in step 1.
4. Run npm run serve. Open browser to http://localhost:3030/demo/dev.html

import map

If running locally without a bundling tool, just pure ESM modules, the following needs to be included in your html file:

<script type=importmap>
    {
        "imports": {
            "xtal-element/": "../node_modules/xtal-element/",
            "trans-render/": "../node_modules/trans-render/",
            "be-decorated/": "../node_modules/be-decorated/"
        }
    }
</script>

A polyfill is required for browsers that don't yet support import maps.