1

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.
Community
  • 1
  • 1
uhbif19
  • 3,139
  • 3
  • 26
  • 48
  • 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 Mar 22 '14 at 09: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 Mar 22 '14 at 09:55
  • @Joraid "you will need to provide your own script to validate it as well." Of course. – uhbif19 Mar 22 '14 at 09:58
  • @Joraid "Besides, only one or two browsers actually support the new input types" It will change. – uhbif19 Mar 22 '14 at 10:03

2 Answers2

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)
});
Supersharp
  • 29,002
  • 9
  • 92
  • 134
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 ">
Mohammed Joraid
  • 6,202
  • 2
  • 27
  • 38
  • 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. – uhbif19 Mar 22 '14 at 10:06
  • 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. – Mohammed Joraid Mar 22 '14 at 10:20