文本输入指南

Applies to Windows and Windows Phone

标准文本输入框控件的外观示例

描述

文本输入框使用户可以通过物理或屏幕键盘输入和编辑文本或数值。使用文字环绕,文本输入框可配置为接受单行或多行文本。

文本输入框由矩形边界构成,中间有一个可编辑的文本区域。在支持触摸的设备上,屏幕键盘将在文本输入框带有焦点时显示。

示例

说明标准文本输入框控件的屏幕截图

这是正确的控件吗?

允许用户输入和编辑文本或数值的文本输入控件。在确定是否使用文本输入控件时考虑以下问题:

  • 高效枚举所有有效值是否实际?如果实际,请考虑改用选择控件之一,例如复选框下拉列表列表框单选按钮滑块切换开关数据选取器或者时间选取器
  • 可用值集是否非常小?如果是,请考虑下拉菜单列表框,尤其是在值的长度超过几个字符的情况下。
  • 有效值是否完全不受约束?或者,有效值是否仅受格式约束(长度或字符类型受约束)?如果是,请使用文本输入控件。你可以限制可以输入的字符数,还可以从输入值范围列表中选择,它可将输入限制为特定字符集或格式—例如,数量、统一资源标识符 (URI) 或者货币。
  • 该值是否表示具有常见专用控件的数据类型?如果是,请使用适当的控件,而不要使用文本输入控件。例如,使用 DatePicker(而非文本输入控件)接受日期输入。
  • 如果数据是数值:
    • 输入的值是否为近似值,并且/或者与同一页面的另一个数量相关?如果是,请使用滑块
    • 用户是否将受益于即时反馈对设置更改的效果?如果是,请使用滑块及其可能的随附控件。
    • 输入的值是否很可能在观察结果后得到调整(例如,正在设置音量或亮度)?如果是,请使用滑块

应做事项和禁止事项

  • 如果用户应键入文本输入框的内容不明显,或者如果对于输入有任何约束,则设置标签或占位符文本。无论文本输入框是否具有值,标签都可见。占位符文本显示在文本输入框内,并在输入值后立即显示。
  • 考虑为控件设置适合可输入的值范围的宽度。请牢记,不同语言之间的字词长度可能有变化,因此需要考虑本地化。
  • 文本输入框通常为单行(文本环绕关闭)。当用户需要输入或编辑较长字符串时,将文本输入框设置为多行(文本环绕打开)。
  • 总体而言,你会将文本输入框用于可编辑的文本。但你可以使文本输入框变为只读,以使其内容可被阅读、选择和复制,但不能编辑。
  • 如果你需要减少视图中的混乱感,请考虑让一组文本输入框仅在选中控制复选框时显示。你还可以将文本输入框的启用状态绑定到诸如复选框等控件上。
  • 请考虑你希望文本输入框在包含值并被用户点击时表现怎样的行为。默认行为较适用于标记值,而不是替代该值 - 插入点将位于字词之间,没有选择任何内容。如果替代才是给定文本输入框最常用的情况,你可以在控件具有焦点时选择字段中的所有文本;键入即可替代选择的内容。
  • 如果你要将输入限制为特定字符集或格式(例如,数量、URI 或货币),请对输入范围进行相应设置。这将确定使用哪个屏幕键盘。

单行输入框

  • 使用多个单行文本框来捕获许多文本信息的较小部分。 如果文本框在本质上相关,你可以将它们并为一组。

  • 使单行文本框比最长的预期输入稍微宽一些。如果这样做会使控件太宽,请将它分成两个控件;例如,可以将一个地址输入分成"地址行 1" 和"地址行 2"。
  • 设置最大长度。如果备份数据源不允许输入长字符串,请限制输入并使用验证弹出窗口来让用户知道何时达到限制。
  • 使用单行文本输入控件从用户那里收集小文本块。

    下面的示例显示一个用来捕获安全问题答案的单行文本框。 答案应当简短,因此这里需要使用单行文本框。 由于所收集的信息与能够由 Windows 识别的任何专业输入类型不匹配,因此需要使用 "Text" 类型。

    基本数据输出

  • 使用一组简短的、大小固定的单行输入文本控件可输入具有特定格式的数据。

    格式化数据输出

  • 将不受限制的单行文本输入控件与一个命令按钮结合使用可输入或编辑字符串。

    辅助数据输出

  • 使用单行数字输入控件可输入或编辑数字。
  • 使用单行密码输入控件可安全地输入密码和 PIN。

    密码和 PIN 输入
  • 使用单行电子邮件输入控件可输入电子邮件地址。

    电子邮件输入

    在使用电子邮件输入控件时,可免费获取以下内容:

    • 当用户导航到文本框时,会在特定于电子邮件的键布局中出现触摸键盘。
    • 当用户输入无效的电子邮件格式时,会出现一个用于通知用户的对话框。电子邮件输入
  • 使用 URL 输入控件可以输入 Web 地址。
  • 使用电话号码输入控件可以输入电话号码。
  • 不要使用行高为 1 的文本区域来创建单行文本框。应改用文本框。
  • 不要使用占位符文本预填充文本控件。当用户使用控件时,文本框将清除占位符文本。应改用 "value" 属性。
  • 不要将文本框作为搜索框。在网站上使用输入元素创建搜索框是一种常见做法。 但是,在改用“搜索”超级按钮时,可以创建更好而且更一致的体验。 “搜索”超级按钮提供可在你的应用中插入的一致的搜索体验。有关详细信息,请参阅添加搜索
  • 不要紧挨密码输入框放置另一个控件。有一个密码显示按钮,供用户验证他们所键入的密码。紧挨着密码输入框旁边放置另一个控件会使用户在尝试与另一个控件交互时,意外显示其密码。 为了防止出现这种情况,请在输入框中的密码和另一个控件之间设置一些间距,或者将另一个控件放在下一行中。

多行文本输入控件

  • 当你选择创建富文本框时,提供样式按钮并实现它们的操作。(使用 JavaScript 的 Windows 应用商店应用不会自动为你提供这些控件。)
  • 使用一种代表应用外观的字体。
  • 使文本控件的高度足够大,以便容纳典型的输入。
  • 如果要捕获较长的文本,并且用户应该将其字词数或字符数保持在某个最大值之下,请使用纯文本框并提供实时运行计数器向用户显示他们在达到上限前还能输入多少字符或字词。 你需要自己创建计数器、将它放在文本框旁,并在用户输入每个字符或字词时动态更新它。

    长文本跨行

  • 不要让文本输入控件在用户键入时增加高度。
  • 当用户仅需要一行时,不要使用多行文本框。
  • 如果纯文本足够使用,不要使用 RTF 框。

其他使用指南

使用文本输入框让用户输入文本值或编辑已输入的值。如果输入值需要约束,也可以实现此目的。你可以限制可输入的字符数量,可以从输入值范围列表中选择,它们会将输入值限制为特定字符集或格式—例如,数量、URI 或货币。

选择合适的多行文本输入控件

当用户需要输入或编辑长字符串时,请使用多行文本控件。存在两种类型的多行文本输入框:纯文本输入控件以及富文本控件。

  • 如果多行文本框的主要用途是创建文档(如日志或电子邮件内容),则这些文档要求 RTF 文本使用 RTF 框。
  • 如果你希望用户能够设置其文本的格式,请使用 RTF 框。
  • 在捕获将仅使用一次但在以后不向用户重新显示的文本时,请使用纯文本输入控件。例如,假设你有一个调查,用户填写该调查后,数据将发送到某台服务器,但是用户甚至无法再次看到数据。 通常没有必要允许用户设置此文本的样式。
  • 对于所有其他情况,请使用纯文本输入控件。

相关主题

对于设计人员
拼写检查指南
添加搜索
对于开发人员 (HTML)
input type=text element | input type=text object
textArea element
contenteditable
对于开发人员 (XAML)
TextBox class

 

 

显示:
© 2015 Microsoft