How to create a custom input type using Web Components?

Question

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.

Types with custom validation like email and tel.
Types with different view like date and datetime.
Types with custom semantic and/or style like search.

Would you please provide an example of a custom input type? What purpose does it provide? In my opinion, I think it's for validation purpose and easy filtering. Which in most cases will require an external library to process — Mohammed Joraid
– Mohammed Joraid, Commented Mar 22, 2014 at 9:32
If want to use a specific type that you created, then I think you will need to provide your own script to validate it as well. Besides, only one or two browsers actually support the new input types, such as Chrome, while Firefox doesn't! — Mohammed Joraid
– Mohammed Joraid, Commented Mar 22, 2014 at 9:55
@Joraid "you will need to provide your own script to validate it as well." Of course. — uhbif19
– uhbif19, Commented Mar 22, 2014 at 9:58
@Joraid "Besides, only one or two browsers actually support the new input types" It will change. — uhbif19
– uhbif19, Commented Mar 22, 2014 at 10:03

Supersharp · Accepted Answer · 2015-10-21 12:31:12Z

1

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)
});

answered Oct 21, 2015 at 12:31

Supersharp

31.5k11 gold badges105 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammed Joraid · Accepted Answer · 2014-03-22 10:18:04Z

0

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 ">

edited Mar 22, 2014 at 10:18

answered Mar 22, 2014 at 9:58

Mohammed Joraid

6,5802 gold badges29 silver badges38 bronze badges

2 Comments

uhbif19 Over a year ago

It is defenetly not that I am looking for. You can not create input type with completly different look and/or behaviour the way you have posted.

Mohammed Joraid Over a year ago

yeah it seems I misunderstood your question. Different look and behavior? like not a text input? would you please provide an example or full scenario on how this kind of custom input would behave.

Collectives™ on Stack Overflow

How to create a custom input type using Web Components?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related