A Web Component to add a protocol to URL inputs. https://chrisburnell.com/url-input/
Find a file
2025-09-04 22:11:00 -03:00
.github Initial commit 2024-08-11 02:01:46 +08:00
.editorconfig Initial commit 2024-08-11 02:01:46 +08:00
.npmignore Initial commit 2024-08-11 02:01:46 +08:00
.prettierignore Initial commit 2024-08-11 02:01:46 +08:00
.prettierrc Initial commit 2024-08-11 02:01:46 +08:00
demo.html Initial commit 2024-08-11 02:01:46 +08:00
LICENSE Initial commit 2024-08-11 02:01:46 +08:00
package-lock.json feat: use nodefine param for define step 2025-09-04 22:11:00 -03:00
package.json feat: use nodefine param for define step 2025-09-04 22:11:00 -03:00
README.md feat: use nodefine param for define step 2025-09-04 22:11:00 -03:00
url-input.js feat: use nodefine param for define step 2025-09-04 22:11:00 -03:00
url-input.test.js Initial commit 2024-08-11 02:01:46 +08:00

<url-input>

A Web Component to add a protocol to URL inputs.

Demo | Further reading

Examples

General usage example

<script type="module" src="url-input.js"></script>

<url-input><input type="url"></url-input>

Installation

You have a few options (choose one of these):

  1. Install via npm: npm install @chrisburnell/url-input
  2. Download the source manually from GitHub into your project.
  3. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Usage

Make sure you include the <script> in your project (choose one of these):

<!-- Host yourself -->
<script type="module" src="url-input.js"></script>
<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://www.unpkg.com/@chrisburnell/url-input/url-input.js"
></script>
<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://esm.sh/@chrisburnell/url-input"
></script>

Credit

With thanks to the following people: