赞助商成为赞助商

输入 / 表单元素 Svelte 组件

表单元素允许您创建灵活且美观的表单布局。表单元素只是众所周知的 列表视图 (列表 和 列表项 Svelte 组件)，但添加了一些额外的组件。

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

输入组件

包含以下组件：

输入属性

属性类型默认描述
<ListInput> 属性
媒体字符串列表项媒体图像 URL
标签字符串输入的标签文本
浮动标签布尔值false启用浮动标签
轮廓布尔值false使输入轮廓
输入布尔值true是否应该渲染输入元素。如果您想在内部使用自定义输入，请禁用它。
类型字符串输入类型。所有默认的 HTML5 输入类型，以及一些特殊的类型
  • textarea - 渲染 textarea 元素
  • select - 渲染 select 元素
  • datepicker - 在输入获得焦点时打开 日历
  • colorpicker - 在输入获得焦点时打开 颜色选择器
  • texteditor - 在输入获得焦点时打开 文本编辑器
可调整大小布尔值false使 textarea 可调整大小
输入样式对象输入的 "style" 属性的值，如果您需要传递额外的样式
清除按钮布尔值false添加输入清除按钮，单击后会清除输入值
验证布尔值false启用后，输入值将在更改时根据传递的 "pattern" 或输入类型进行验证。如果您使用自定义验证并且需要更多控制权来显示/隐藏错误消息，那么最好禁用验证并使用 error-message 和 error-message-force 属性。
验证在失去焦点时布尔值false启用后，输入将在失去焦点时进行验证。
onValidate函数在输入验证时执行的回调函数，返回布尔值，表示输入是否有效。
<ListInput
  type="email"
  validate
  onValidate={(isValid) => setInputValid(isValid)}
/>
错误消息字符串当输入值无效时显示的自定义错误消息
errorMessageForce布尔值false强制错误消息为 errorMessage。如果您使用自定义验证并且想要在需要时显示/隐藏错误消息，这很有用
信息字符串有关输入的自定义附加文本信息
名称字符串输入名称
占位符字符串输入占位符
ID字符串包装元素的 ID 属性
输入 ID字符串输入元素的 ID 属性
值字符串
数字

输入值。

如果 type="datepicker"，则值必须传递为 日历 接受的内容 - 包含日期的数组，例如 value={[new Date()]}

如果 type="colorpicker"，则值必须传递为 颜色选择器 接受的内容 - 包含颜色的对象，例如 value={{hex: '#ff0000'}}

如果 type="texteditor"，则值应为 HTML 字符串

输入模式字符串输入的原生 "inputmode" 属性的值
大小字符串
数字		输入的原生 "size" 属性的值
模式字符串输入的原生 "pattern" 属性的值
接受字符串
数字		输入的原生 "accept" 属性的值
自动完成字符串输入的原生 "autocomplete" 属性的值
自动聚焦布尔值false输入的原生 "autofocus" 属性的值
自动保存字符串输入的原生 "autosave" 属性的值
禁用布尔值false将输入标记为禁用
最大字符串
数字		输入的原生 "max" 属性的值
最小字符串
数字		输入的原生 "min" 属性的值
步长字符串
数字		输入的原生 "step" 属性的值
最大长度字符串
数字		输入的原生 "maxlength" 属性的值
最小长度字符串
数字		输入的原生 "minlength" 属性的值
多个布尔值false输入的原生 "multiple" 属性的值
只读布尔值false将输入标记为只读
必需布尔值false将输入标记为必需
标签索引字符串
数字		输入的原生 "tabindex" 属性的值
noStoreData布尔值false允许忽略输入值在使用 表单存储 时被存储
ignoreStoreData布尔值false与上一个相同
包装布尔值true启用后，它将被包装在 <li> 元素中
日历参数对象包含 日历参数 的对象，当 type="datepicker" 时使用
颜色选择器参数对象包含 颜色选择器参数 的对象，当 type="colorpicker" 时使用
文本编辑器参数对象包含 文本编辑器参数 的对象，当 type="texteditor" 时使用
<Input> 属性
轮廓布尔值false使输入轮廓
包装布尔值true定义输入是否应该被 <div class="input"> 元素包装。
类型字符串输入类型。所有默认的 HTML5 输入类型，以及一些特殊的类型
  • textarea - 渲染 textarea 元素
  • select - 渲染 select 元素
  • datepicker - 在输入获得焦点时打开 日历
  • colorpicker - 在输入获得焦点时打开 颜色选择器
  • texteditor - 在输入获得焦点时打开 文本编辑器
可调整大小布尔值false使 textarea 可调整大小
输入样式对象输入的 "style" 属性的值，如果您需要传递额外的样式
清除按钮布尔值false添加输入清除按钮，单击后会清除输入值
验证布尔值false启用后，输入值将在更改时根据传递的 "pattern" 或输入类型进行验证。如果您使用自定义验证并且需要更多控制权来显示/隐藏错误消息，那么最好禁用验证并使用 error-message 和 error-message-force 属性。
验证在失去焦点时布尔值false启用后，输入将在失去焦点时进行验证。
onValidate函数在输入验证时执行的回调函数，返回布尔值，表示输入是否有效。
<Input
  type="email"
  validate
  onValidate={(isValid) => setInputValid(isValid)}
/>
错误消息字符串当输入值无效时显示的自定义错误消息
errorMessageForce布尔值false强制错误消息为 errorMessage。如果您使用自定义验证并且想要在需要时显示/隐藏错误消息，这很有用
信息字符串有关输入的自定义附加文本信息
名称字符串输入名称
占位符字符串输入占位符
ID字符串包装元素的 ID 属性
输入 ID字符串输入元素的 ID 属性
值字符串
数字

输入值。

如果 type="datepicker"，则值必须传递为 日历 接受的内容 - 包含日期的数组，例如 value={[new Date()]}

如果 type="colorpicker"，则值必须传递为 颜色选择器 接受的内容 - 包含颜色的对象，例如 value={{hex: '#ff0000'}}

如果 type="texteditor"，则值应为 HTML 字符串

输入模式字符串输入的原生 "inputmode" 属性的值
大小字符串
数字		输入的原生 "size" 属性的值
模式字符串输入的原生 "pattern" 属性的值
接受字符串
数字		输入的原生 "accept" 属性的值
自动完成字符串输入的原生 "autocomplete" 属性的值
自动聚焦布尔值false输入的原生 "autofocus" 属性的值
自动保存字符串输入的原生 "autosave" 属性的值
选中布尔值false将输入标记为选中
禁用布尔值false将输入标记为禁用
最大字符串
数字		输入的原生 "max" 属性的值
最小字符串
数字		输入的原生 "min" 属性的值
步长字符串
数字		输入的原生 "step" 属性的值
最大长度字符串
数字		输入的原生 "maxlength" 属性的值
最小长度字符串
数字		输入的原生 "minlength" 属性的值
多个布尔值false输入的原生 "multiple" 属性的值
只读布尔值false将输入标记为只读
必需布尔值false将输入标记为必需
标签索引字符串
数字		输入的原生 "tabindex" 属性的值
noStoreData布尔值false允许忽略输入值在使用 表单存储 时被存储
ignoreStoreData布尔值false与上一个相同
日历参数对象包含 日历参数 的对象，当 type="datepicker" 时使用
颜色选择器参数对象包含 颜色选择器参数 的对象，当 type="colorpicker" 时使用
文本编辑器参数对象包含 文本编辑器参数 的对象，当 type="texteditor" 时使用

输入事件

事件参数描述
<ListInput>, <Input> 事件
焦点(事件)当用户将焦点放在输入上时触发。
失去焦点(事件)当用户从输入中失去焦点时触发。
输入(事件)当输入值更改时立即触发。注意：Input 事件在 beforeinput、keypress、keyup、keydown 事件之后触发。
更改(事件)如果值发生更改，则在失去焦点时触发。
输入清除(事件)单击输入清除按钮时触发
textareaResize(事件)如果可调整大小的 textarea 调整大小，则触发。event.detail 将包含一个包含 initialHeight、currentHeight 和 scrollHeight 属性的对象
输入为空(事件)当输入值变为空时触发
输入不为空(事件)当输入值不为空时触发
日历更改(值)当 type="datepicker" 日历值更改时触发。作为参数，它接收包含所选日期的数组。
颜色选择器更改(值)当 type="colorpicker" 颜色选择器值更改时触发。作为参数，它接收包含颜色选择器值的数组。
文本编辑器更改(值)当 type="texteditor" 文本编辑器值更改时触发。作为参数，它接收文本编辑器值 (HTML 字符串)。

输入插槽

<ListInput> 具有用于自定义元素的附加插槽

例子

inputs.svelte
<script>
  import { Navbar, Page, BlockTitle, List, ListInput, Range } from 'framework7-svelte';
</script>

<Page>
  <Navbar title="Form Inputs" />

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

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

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

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

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

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

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

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

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

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

    <ListInput label="Resizable" type="textarea" resizable placeholder="Bio">
      <i class="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>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

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

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

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

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

    <ListInput label="Resizable" floatingLabel type="textarea" resizable placeholder="Bio">
      <i class="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>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
    <ListInput
      outline
      label="Password"
      floatingLabel
      type="password"
      placeholder="Your password"
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
    <ListInput
      outline
      label="E-mail"
      floatingLabel
      type="email"
      placeholder="Your e-mail"
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
    <ListInput outline label="URL" floatingLabel type="url" placeholder="URL" clearButton>
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
    <ListInput
      outline
      label="Phone"
      floatingLabel
      type="tel"
      placeholder="Your phone number"
      clearButton
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
    <ListInput
      outline
      label="Bio"
      floatingLabel
      type="textarea"
      resizable
      placeholder="Bio"
      clearButton
    >
      <i class="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
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput
      label="Fruit"
      type="text"
      placeholder="Type 'apple' or 'banana'"
      required
      validate
      pattern="apple|banana"
      clearButton
    >
      <i class="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
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>

    <ListInput
      label="URL"
      type="url"
      placeholder="Your URL"
      info="Default URL validation"
      required
      validate
      clearButton
    >
      <i class="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
    >
      <i class="icon demo-list-icon" slot="media" />
    </ListInput>
  </List>

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

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

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

    <ListInput type="url" placeholder="URL" clearButton>
      <i class="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>
改进此文档
在此页面上