Clear text field buttons

Checkout the demo and read the explainer for more information.

Required Markup

The minimal required markup for this pattern:

<custom-clear>
  <input>
</custom-clear>

But let's be serious, you'll need to provide more information than that, and will often want your label to be positioned 'on top' of your text field.

<label for=ex>Example</label>
<div>
  <custom-clear>
    <input id=ex>
  </custom-clear>
</div>

Once the script runs, a clear button will be generated and added as a sibling to the <input> element:

<span class="clr-btn" role="button" aria-label="clear entry" tabindex="-1" hidden>
  <span aria-hidden="true">×</span>
</span>

You can import the script or add it directly to your page. Then call the function like so:

<script src="index.js"></script>
<script>
  const els = document.querySelectorAll('custom-clear');
  for ( let i = 0; i < els.length; i++ ) {
    customClear(els[i])
  }
</script>

Change the custom element's name, or don't use a custom element at all and instead do something like a <span class=foo>. I just like using custom elements instead of giving class names to <div>s or <span>s.

License & Such

This script was written by Scott O'Hara: Website, Twitter.

It has an MIT license.

Use it, modify it, contribute to it! I hope it helps make your project more accessible :)