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.
4

2 回答 2

1

使用 Web 组件，您可以定义将扩展原型的自定义元素。HTMLInputElement

本教程展示了一个（非常基本的）示例：

var XComponent = document.registerElement('x-component', {
  extends: 'input',
  prototype: Object.create(HTMLInputElement.prototype)
});
于 2015-10-21T12:31:12.427 回答
0

但只需简单地添加您自己的属性。

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

并且薄有 javascript 为您验证。

或者，您可以使用模式属性来指定您自己的输入类型，如此处所示

例子：

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

和

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

更新：一种名为注册码的新自定义输入类型，遵循 WEK070605 格式

  <input  pattern="[A-Z]{3}[0-9]{6}" required ">
于 2014-03-22T09:58:51.150 回答