文本字段

文本字段是商家可以输入的输入字段。它有一系列选项，支持包括数字在内的多种文本格式。

用于允许商家在预期输入不足时提供文本输入。对于较长的输入，使用自动增长或多行选项。

进口｛文本框｝从“@shopify /北极星”；进口｛useState，useCallback｝从“反应”；函数TextFieldExample（）｛常量［价值，setValue］＝useState（“厌倦像素”）；常量handleChange＝useCallback（（newValue）= >setValue（newValue），［］）；返回（<文本字段标签＝“商店名称”价值＝｛价值｝onChange＝｛handleChange｝自动完成＝“关闭”/>）；｝

最佳实践

文本字段应该:

要有清晰的标签，这样商家就能清楚地知道他们应该进入哪个领域
当你需要请求非必需的输入时，将其标记为“可选”
只问真正需要的信息
在商家完成与字段的交互后立即验证输入(但不是在此之前)

自动完成

属性中的自动完成属性输入字段控制两种类型的浏览器行为:

浏览器自动填充:一种自动用以前保存的信息填充表单字段的功能，如密码、地址和信用卡数据。

自动填充对我们的用户来说是一个重要的功能。谷歌已经找到了“用户完成表单的速度加快了30%”当使用自动填充。
控件支持的自动填充值列表自动完成属性。回顾“4.10.18.7自动填充”部分所有输入类型及其对应的自动补全属性值。

浏览器自动完成-显示该字段以前提交的值的功能。

当该选项为字段打开时，用户将看到一个列表，其中包含先前提交的输入值

建议

如果类型是:颜色、日期、datetime-local、电子邮件、月份、数字、密码、范围、搜索、电话、文本、时间、url或周，则始终为输入添加一个自动完成属性和值。

关闭自动填充/自动完成

即使您不希望浏览器自动填充用户信息，建议您仍然使用值为off或nope的autocomplete属性。

不幸的是,并非所有浏览器都支持或者尊重autocomplete="off"。这让事情变得很有挑战性。比如Chrome，有一个长期未解决的bug并且暂时不会添加对off的支持。

浏览器	支持`自动完成=“关闭”`	细节
铬	部分	故意忽略了`从`值，当用户使用浏览器的自动填充功能时。看到虫子．
Safari	部分	忽略了`从`值`用户名`，`电子邮件`而且`密码`字段。
火狐	部分	忽略了`从`的值。看到虫子．
边缘	部分	故意忽略了`从`值，当用户使用浏览器的自动填充功能时。

Chrome似乎在使用值nope(或任何无效字符串)时关闭了自动完成功能。然而，即使有这样的支持，我们也看到了一些不一致的情况。

推荐(仅Chrome浏览器)

同时关闭自动填充而且浏览器自动完成(之前提交的值)在Chrome
- 使用自动完成=不也必须有一个的名字属性．
关掉浏览器自动完成(之前提交的值)在Chrome
- 如果你没有的名字属性和字段不是典型的自动填充输入(地址、电子邮件等)，使用自动完成=了．

虚拟键盘

使用inputMode设置的不同数字键盘的示例

的inputMode属性应设置为为预期用户输入的数据类型选择适当的虚拟键盘。以上是不同数字键盘设置的例子inputMode．

内容的指导方针

有关文本字段内容指南，请参考文本字段经验页面。

为了以响应式的形式展示元素，使用表单布局组件
若要描述带有单独验证错误的无效表单输入，使用内联错误组件
这很常见使用选择组件连接到文本字段的左侧或右侧。

可访问性

结构

屏幕阅读器通过原生HTML自动传递关于文本字段的信息。

使用禁用道具来添加HTML禁用属性设置为文本字段。
使用只读的道具来添加HTML只读的属性设置为文本字段。
如果你使用类型道具，然后一些辅助技术使软件键盘适应当前任务。这有助于有移动、视觉和认知问题的商家更容易地输入信息。

使用id道具提供独特id属性值。如果你不提供id，则组件自动生成一个。所有文本字段都需要具有唯一性id值。

键盘支持

文本字段具有标准键盘支持。

依赖于键盘的商家希望使用控件将焦点移动到每个文本字段选项卡键(或转变+选项卡当向后切换时)
如果类型设置为数量，然后商家可以使用上下方向键来调整输入字段的值
使用禁用道具将阻止文本字段接收键盘焦点或输入
的只读的Prop允许聚焦文本字段，但阻止输入或编辑
的inputModeProp可用于为移动设备上的商家提供相关键盘;它以an的形式传递给输入inputmode属性

自动聚焦

虽然你可以用自动对焦道具可自动将焦点移动到文本字段，通常最好避免自动聚焦在字段上。的自动对焦道具设置为假默认情况下，只应该在它不会强制焦点跳过其他同等或更重要的控件或内容的情况下使用。