输入 / 表单元素 React 组件

表单元素允许你创建灵活且精美的表单布局。表单元素只是知名的列表视图（列表和列表项 React 组件），但增加了一些额外的组件。

查看 Framework7 的输入 / 表单元素以了解它们的外观。

输入组件

以下组件包括

ListInput - 列表项输入元素
Input - 输入元素

输入属性

属性	类型	默认	描述
<ListInput> 属性
媒体	字符串		列表项媒体图像 URL
标签	字符串		输入的标签文本
浮动标签	布尔值	false	启用浮动文本标签
outline	布尔值	false	设置输入轮廓
input	布尔值	true	是否应渲染输入元素。若想在里面使用自定义输入，请禁用此项。
type	字符串		输入类型。所有默认 HTML5 输入类型和几个特殊类型 textarea - 渲染文本区域元素 select - 渲染选择元素 datepicker - 在输入焦点上打开日历 colorpicker - 在输入焦点上打开颜色选择器 texteditor - 在输入焦点上打开文本编辑器
resizable	布尔值	false	使文本区域可调整大小
inputStyle	object		如果需要传递额外样式，则为输入的“style”属性的值
clearButton	布尔值	false	添加输入清除按钮，该按钮单击时将清除输入值
validate	布尔值	false	启用后，将根据已通过的“pattern”或输入类型对输入值进行验证。如果您使用自定义验证并且需要更好地控制显示/隐藏错误消息的位置，则最好禁用验证并同时使用道具`error-message` 和 `error-message-force`。
validateOnBlur	布尔值	false	启用后，仅在失去焦点时才对输入进行验证。
onValidate	function		在输入验证时执行的回调，返回布尔值以指示输入是否有效。 `<ListInput type="email" validate :onValidate={(isValid) => setInputValid(isValid)} />`
errorMessage	字符串		当输入值无效时显示的自定义错误消息
errorMessageForce	布尔值	false	强制显示错误消息。如果您使用自定义验证并想在需要时显示/隐藏错误消息，则此项非常有用
info	字符串		关于输入信息的自定义附加文本
name	字符串		输入名称
placeholder	字符串		输入占位符
id	字符串		包装元素 ID 属性
inputId	字符串		输入元素 ID 属性
value	字符串 number		输入值。如果 `type="datepicker"`，则必须将值传递为Calendar 接受的内容 - 包含日期的数组，例如 `value={[new Date()]}` 如果 `type="colorpicker"`，则必须将值传递为Color Picker 接受的内容 - 包含颜色的对象，例如 `value={{hex: '#ff0000'}}` 如果 `type="texteditor"`，则值应为 HTML 字符串
defaultValue	字符串 number		对于不受控组件，输入的值
inputmode	字符串		输入原生“inputmode”属性的值
size	字符串 number		输入原生“size”属性的值
pattern	字符串		输入原生“pattern”属性的值
accept	字符串 number		输入原生“accept”属性的值
autocomplete	字符串		输入原生“autocomplete”属性的值
autofocus	布尔值	false	输入原生“autofocus”属性的值
autosave	字符串		输入控件原生“autosave”属性值
disabled	布尔值	false	标记输入控件为禁用状态
max	字符串 number		输入控件原生“max”属性值
min	字符串 number		输入控件原生“min”属性值
step	字符串 number		输入控件原生“step”属性值
maxlength	字符串 number		输入控件原生“maxlength”属性值
minlength	字符串 number		输入控件原生“minlength”属性值
multiple	布尔值	false	输入控件原生“multiple”属性值
readonly	布尔值	false	标记输入控件为只读状态
required	布尔值	false	标记输入控件为必填项
tabindex	字符串 number		输入控件原生“tabindex”属性值
noStoreData	布尔值	false	配合表单存储忽略存储输入控件值
ignoreStoreData	布尔值	false	与上述属性相同
wrap	布尔值	true	启用后，将会包裹在 `<li>`
calendarParams	object		当 `type="datepicker"` 时，包含日历参数的对象
colorPickerParams	object		当 `type="colorpicker"` 时，包含颜色选择器参数的对象
textEditorParams	object		当 `type="texteditor"` 时，包含文本编辑器参数的对象
<Input> 属性
outline	布尔值	false	设置输入轮廓
wrap	布尔值	true	定义输入控件是否用 `<div class="input">` 元素包装
type	字符串		输入类型。所有默认 HTML5 输入类型和几个特殊类型 textarea - 渲染文本区域元素 select - 渲染选择元素 datepicker - 在输入焦点上打开日历 colorpicker - 在输入焦点上打开颜色选择器 texteditor - 在输入焦点上打开文本编辑器
resizable	布尔值	false	使文本区域可调整大小
inputStyle	object		如果需要传递额外样式，则为输入的“style”属性的值
clearButton	布尔值	false	添加输入清除按钮，该按钮单击时将清除输入值
validate	布尔值	false	启用后，将根据已通过的“pattern”或输入类型对输入值进行验证。如果您使用自定义验证并且需要更好地控制显示/隐藏错误消息的位置，则最好禁用验证并同时使用道具`error-message` 和 `error-message-force`。
validateOnBlur	布尔值	false	启用后，仅在失去焦点时才对输入进行验证。
onValidate	function		在输入验证时执行的回调，返回布尔值以指示输入是否有效。 `<Input type="email" validate :onValidate={(isValid) => setInputValid(isValid)} />`
errorMessage	字符串		当输入值无效时显示的自定义错误消息
errorMessageForce	布尔值	false	强制显示错误消息。如果您使用自定义验证并想在需要时显示/隐藏错误消息，则此项非常有用
info	字符串		关于输入信息的自定义附加文本
name	字符串		输入名称
placeholder	字符串		输入占位符
id	字符串		包装元素 ID 属性
inputId	字符串		输入元素 ID 属性
value	字符串 number		输入值。如果 `type="datepicker"`，则必须将值传递为Calendar 接受的内容 - 包含日期的数组，例如 `value={[new Date()]}` 如果 `type="colorpicker"`，则必须将值传递为Color Picker 接受的内容 - 包含颜色的对象，例如 `value={{hex: '#ff0000'}}` 如果 `type="texteditor"`，则值应为 HTML 字符串
defaultValue	字符串 number		对于不受控组件，输入的值
inputmode	字符串		输入原生“inputmode”属性的值
size	字符串 number		输入原生“size”属性的值
pattern	字符串		输入原生“pattern”属性的值
accept	字符串 number		输入原生“accept”属性的值
autocomplete	字符串		输入原生“autocomplete”属性的值
autofocus	布尔值	false	输入原生“autofocus”属性的值
autosave	字符串		输入控件原生“autosave”属性值
checked	布尔值	false	标记输入控件为已选中
disabled	布尔值	false	标记输入控件为禁用状态
max	字符串 number		输入控件原生“max”属性值
min	字符串 number		输入控件原生“min”属性值
step	字符串 number		输入控件原生“step”属性值
maxlength	字符串 number		输入控件原生“maxlength”属性值
minlength	字符串 number		输入控件原生“minlength”属性值
multiple	布尔值	false	输入控件原生“multiple”属性值
readonly	布尔值	false	标记输入控件为只读状态
required	布尔值	false	标记输入控件为必填项
tabindex	字符串 number		输入控件原生“tabindex”属性值
noStoreData	布尔值	false	配合表单存储忽略存储输入控件值
ignoreStoreData	布尔值	false	与上述属性相同
calendarParams	object		当 `type="datepicker"` 时，包含日历参数的对象
colorPickerParams	object		当 `type="colorpicker"` 时，包含颜色选择器参数的对象
textEditorParams	object		当 `type="texteditor"` 时，包含文本编辑器参数的对象

输入控件事件

事件	参数	描述
<ListInput>，<Input> 事件
focus	(event)	当用户聚焦到输入控件时触发
blur	(event)	当用户失去输入控件焦点时触发
input	(event)	当输入控件值更改时，立即触发。注：输入事件在 beforeinput、keypress、keyup、keydown 事件之后触发
change	(event)	如果值已更改，则在失去焦点时触发
inputClear	(event)	当输入控件的清除按钮被点击时触发
textareaResize	(event)	如果可调整大小的 textarea 调整了大小，则触发。`event.detail` 将包含一个包含 `initialHeight`、`currentHeight` 和 `scrollHeight` 属性的对象
inputEmpty	(event)	当输入控件值变为空时触发
inputNotEmpty	(event)	当输入控件值变为非空时触发
calendarChange	(value)	当 `type="datepicker"` 的日历值更改时触发。作为一个参数，它接收一个包含所选日期的数组
colorPickerChange	(value)	当 `type="colorpicker"` 的颜色选择器值更改时触发。作为一个参数，它接收一个包含颜色选择器值的的对象
textEditorChange	(value)	当 `type="texteditor"` 的文本编辑器值更改时触发。作为一个参数，它接收文本编辑器值（HTML 字符串）

输入控件插槽

<ListInput> 有用于自定义元素的额外插槽

default - 如果 type="select" 或 type="textarea"，则元素将被置于 select 或 textarea 标记内
信息 - 元素将插入容器中，带有信息消息
错误消息 - 元素将插入容器中，带有错误消息
标签 - 元素将插入容器中，带有输入控件的标签
输入 - 元素将插入在输入控件元素替换位置（input 属性还必须设置为 false）
root-start - 元素将插入 <li> 元素的开头
root / root-end - 元素将插入 <li> 元素的结尾
content-start - 元素将插入 <div class="item-content"> 元素的开头
content / content-end - 元素将插入 <div class="item-content"> 元素的结尾
inner-start - 元素将插入 <div class="item-inner"> 元素的开头
inner / inner-end - 元素将插入 <div class="item-inner"> 元素的结尾
媒体 - 元素将插入 <div class="item-media"> 元素中

示例

inputs.jsx

import React from 'react';
import { Navbar, Page, BlockTitle, List, Icon, ListInput, Range } from 'framework7-react';

export default () => (
  <Page>
    <Navbar title="Form Inputs" />

    <BlockTitle>Full Layout / Stacked Labels</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput label="Name" type="text" placeholder="Your name" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Password" type="password" placeholder="Your password" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="E-mail" type="email" placeholder="Your e-mail" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="URL" type="url" placeholder="URL" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Phone" type="tel" placeholder="Your phone number" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Gender" type="select" defaultValue="Male" placeholder="Please choose...">
        <Icon icon="demo-list-icon" slot="media" />
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </ListInput>

      <ListInput
        label="Birthday"
        type="date"
        defaultValue="2014-04-30"
        placeholder="Please choose..."
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Date time" type="datetime-local" placeholder="Please choose...">
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Range" input={false}>
        <Icon icon="demo-list-icon" slot="media" />
        <Range slot="input" value={50} min={0} max={100} step={1} />
      </ListInput>

      <ListInput label="Textarea" type="textarea" placeholder="Bio">
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Resizable" type="textarea" resizable placeholder="Bio">
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
    </List>

    <BlockTitle>Floating Labels</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput label="Name" floatingLabel type="text" placeholder="Your name" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput
        label="Password"
        floatingLabel
        type="password"
        placeholder="Your password"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="E-mail" floatingLabel type="email" placeholder="Your e-mail" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="URL" floatingLabel type="url" placeholder="URL" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Phone" floatingLabel type="tel" placeholder="Your phone number" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Resizable" floatingLabel type="textarea" resizable placeholder="Bio">
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
    </List>

    <BlockTitle>Floating Labels + Outline Inputs</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput outline label="Name" floatingLabel type="text" placeholder="Your name" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput
        outline
        label="Password"
        floatingLabel
        type="password"
        placeholder="Your password"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput
        outline
        label="E-mail"
        floatingLabel
        type="email"
        placeholder="Your e-mail"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput outline label="URL" floatingLabel type="url" placeholder="URL" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput
        outline
        label="Phone"
        floatingLabel
        type="tel"
        placeholder="Your phone number"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput
        outline
        label="Bio"
        floatingLabel
        type="textarea"
        resizable
        placeholder="Bio"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
    </List>

    <BlockTitle>Validation + Additional Info</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput
        label="Name"
        type="text"
        placeholder="Your name"
        info="Default validation"
        required
        validate
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput
        label="Fruit"
        type="text"
        placeholder="Type 'apple' or 'banana'"
        required
        validate
        pattern="apple|banana"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
        <span slot="info">
          Pattern validation (<b>apple|banana</b>)
        </span>
      </ListInput>

      <ListInput
        label="E-mail"
        type="email"
        placeholder="Your e-mail"
        info="Default e-mail validation"
        required
        validate
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput
        label="URL"
        type="url"
        placeholder="Your URL"
        info="Default URL validation"
        required
        validate
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput
        label="Number"
        type="text"
        placeholder="Enter number"
        info="With custom error message"
        errorMessage="Only numbers please!"
        required
        validate
        pattern="[0-9]*"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
    </List>

    <BlockTitle>Icon + Input</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput type="text" placeholder="Your name" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput type="password" placeholder="Your password" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput type="email" placeholder="Your e-mail" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput type="url" placeholder="URL" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
    </List>

    <BlockTitle>Label + Input</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput label="Name" type="text" placeholder="Your name" clearButton />

      <ListInput label="Password" type="password" placeholder="Your password" clearButton />

      <ListInput label="E-mail" type="email" placeholder="Your e-mail" clearButton />

      <ListInput label="URL" type="url" placeholder="URL" clearButton />
    </List>

    <BlockTitle>Only Inputs</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput type="text" placeholder="Your name" clearButton />

      <ListInput type="password" placeholder="Your password" clearButton />

      <ListInput type="email" placeholder="Your e-mail" clearButton />

      <ListInput type="url" placeholder="URL" clearButton />
    </List>

    <BlockTitle>Inputs + Additional Info</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput type="text" placeholder="Your name" info="Full name please" clearButton />

      <ListInput
        type="password"
        placeholder="Your password"
        info="8 characters minimum"
        clearButton
      />

      <ListInput
        type="email"
        placeholder="Your e-mail"
        info="Your work e-mail address"
        clearButton
      />

      <ListInput type="url" placeholder="URL" info="Your website URL" clearButton />
    </List>
  </Page>
);

改善此文档

在此页面上

输入组件
输入属性
输入控件事件
输入控件插槽
示例