Question

HTML5 introduce new kinds of input喜欢：数字，颜色，日期时间。 AngularJS与其中一些的polyfill捆绑在一起。

我正在寻找一些可用的方法来创建自定义输入类型，使用Web组件或HTML的其他标准化部分。已经有了for AngularJS，但我不想使用任何外部的libruary。

UPD：

从HTML5中获取的自定义类型示例。

具有自定义验证的类型，例如电子邮件和 tel 。
具有不同视图的类型，例如日期和日期时间。
具有自定义语义和/或样式的类型，例如搜索。

Answer 1

使用Web Compontents，您可以定义一个自定义元素，它将扩展HTMLInputElement原型。

这个tutorial显示了一个（非常基本的）示例：

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

Answer 2

但只需添加您自己的属性即可。

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

并且瘦有javascript来验证这一点。

或者，您可以使用pattern属性将自己的输入类型指定为showed here

示例：

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

如何使用Web Components创建自定义输入类型？

2 个答案: