CODEWITHSUNDEEP
javascripthtmlweb-componentcustom-element
uhbif19
uhbif19

Reputation: 3245

How to create a custom input type using Web Components?

HTML5 introduce new kinds of input like: number, color, datetime. AngularJS is bundled with polyfills for some of them.

I am looking for some usable method to create custom type of input, using Web Components or another standardized part of HTML. There is already anwser for AngularJS, but I do not want use any external libruary.

UPD:

Examples of custom types taken from HTML5.

Upvotes: 1

Views: 1674

Answers (2)

Supersharp
Supersharp

Reputation: 31181

Using Web Compontents, you can define a Custom Element that will extend the HTMLInputElement prototype.

This tutorial shows a (very basic) example:

var XComponent = document.registerElement('x-component', {
  extends: 'input',
  prototype: Object.create(HTMLInputElement.prototype)
});

Upvotes: 1

Mohammed Joraid
Mohammed Joraid

Reputation: 6480

But just simply add your own attribute. 

<input type="custom" name="reg_code" />

And thin have javascript to validate that for you.

Or, you can use the pattern attribute to specify your own input type as showed here

Example:

<input type="text" type="tel" pattern="[0-9]{9}">

And 

<input type="email" title="E-mail format required" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*\.(\w{2}|(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum))$" required="" id="email" name="email">

Update: a new custom input type called Registration Code to follow the format WEK070605

  <input  pattern="[A-Z]{3}[0-9]{6}" required ">

Upvotes: 0

Related Questions