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>
    Test
    <input be-committed-to="#change">
</label>
    
<button id=change onclick="logToConsole()">Click Here</button>

What this does:

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

The "nudges" setting allows for setting the disabled attribute for the input element, and the nudges setting removes the disabled attribute (or lowers the number by one if set to a number higher than 1), so we can progressively enhance the input element, activating it when ready.

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

To affect elements within a ShadowDOM realm, add an instance the tag "be-hive" within the ShadowDOM realm.

Alternative name and support for nudging

We can use a shorter name in less formal settings, where we can control conflicts with other libraries:

<label>
    Test
    <input disabled 🤝-to="#change" 🤝-nudges>
</label>

<button disabled id=change onclick="logToConsole()">Click Here</button>

See how to define your name.

Default submit button if "-to" value not specified: [TODO]

<form>
    <label>
        Test
        <input disabled 🤝-nudges>
    </label>

    <button disabled type=submit>Continue</button>
</form>

Running locally

Any web server that can serve static files will do, but...

1. Install git.
2. Do a git clone or a git fork of repository https://github.com/bahrus/be-committed
3. Install node.js
4. Install Python v3 or later
5. Open command window to folder where you cloned this repo.

6. npm install

7. npm run serve

8. Open http://localhost:8000/demo/dev in a modern browser.

Using from ESM Module:

import 'be-committed/be-committed.js';

Using from CDN:

<script type=module crossorigin=anonymous>
    import 'https://esm.run/be-committed';
</script>