如何使用material2输入组件

Question

我在材料文档中看到了支持的输入类型

• 以下输入类型可与md-input-container一起使用：

  • 日期
  • 日期时间本地
  • 电子邮件
  • 月
  • 号
  • 密码
  • 搜索
  • 电话
  • 文本
  • 时间
  • URL
  • 周

但我只是看看如何使用mdInput或textarea，我想知道如何使用其他类型的输入组件。

Answer 1

这些是可以应用HTML5 <input> types指令的标准mdInput。您列出的<input>类型的使用方式与type="text"的使用方式相同。

这取决于浏览器如何显示这些控件以及呈现后的行为。例如，type="date"将在较新的浏览器中显示日期选择器。

使用简单示例

MDN Form <input> types

<强>日期

  

日期：HTML5用于输入日期的控件（年，月，日，没有时间）。

<md-input-container>
    <input mdInput 
        type="date"
        ...>
</m-input-container>

本地日期/时间

  

datetime-local ：HTML5用于输入日期和时间的控件，没有时区。

<md-input-container>
    <input mdInput 
        type="datetime-local"
        ...>
</m-input-container>

电子邮件

  

电子邮件：HTML5用于编辑电子邮件地址的字段。

<md-input-container>
    <input mdInput 
        type="email"
        ...>
</m-input-container>

<强>月

  

月：HTML5用于输入月份和年份的控件，没有时区。

<md-input-container>
    <input mdInput 
        type="month"
        ...>
</m-input-container>

<强>数

  

数字：HTML5用于输入数字的控件。

<md-input-container>
    <input mdInput 
        type="number"
        ...>
</m-input-container>

密码

  

密码：单行文本字段，其值被遮挡。

<md-input-container>
    <input mdInput 
        type="password"
        ...>
</m-input-container>

搜索

  

搜索：HTML5用于输入搜索字符串的单行文本字段。换行符会自动从输入值中删除。

<md-input-container>
    <input mdInput 
        type="search"
        ...>
</m-input-container>

<强>电话

  

tel ：HTML5用于输入电话号码的控件。自动从输入值中删除换行符，但不强制执行其他语法。您可以使用pattern和maxlength等属性来限制在控件中输入的值。

<md-input-container>
    <input mdInput 
        type="tel"
        ...>
</m-input-container>

文字

  

文字：单行文字字段。换行符会自动从输入值中删除。

<md-input-container>
    <input mdInput 
        type="text"
        ...>
</m-input-container>

<强>时间

  

时间：HTML5用于输入没有时区的时间值的控件。

<md-input-container>
    <input mdInput 
        type="time"
        ...>
</m-input-container>

<强>网址

  

url ：HTML5用于编辑网址的字段。在提交之前，输入值将被验证为包含空字符串或有效的绝对URL。您可以使用pattern和maxlength等属性来限制在控件中输入的值。

<md-input-container>
    <input mdInput 
        type="url"
        ...>
</m-input-container>

<强>周

  

周：HTML5用于输入包含周年数和周数的日期的控件。

<md-input-container>
    <input mdInput 
        type="week"
        ...>
</m-input-container>