Text fields and text areas are form controls that users can type responses into in the web browser. They are located in the Forms section of the Default widget library.文本输入框和文本区域是表单控件,用户可以在Web浏览器中输入响应。 它们位于默认窗口部件库的“表单”部分中。
Use a text field widget when prototyping a form field for which a short (single-line) response is expected, such as a username or password field. (These are also good for search fields.)在原型表单字段为简短(单行)表单字段时,请使用文本输入框部件,比如用户名或密码字段。 |
Use a text area widget when prototyping a form field for which a long (multi-line) response is expected, such as a feedback form.在原型表单字段为简较长(多行)表单字段时,请使用文本输域部件。 |
Tip提示
You can capture the text that users enter into text fields and text areas and pass that text to other pages in the prototype. Learn how in the Pass Text to Next Page tutorial.你可以获取用户输入到文本输入框和文本域中的文本,并将该文本传递到原型中的其他页面。 在将文本传递给下一页教程中学习如何操作。
Hint Text提示文本
You can add hint text to a text field/area using the Hint Text field in the More Properties menu at the top-right of the Interactions pane. Hint text will appear in a text field/area until the user interacts with it, at which time it will disappear to allow the user to fill in the input as needed.你可以使用“交互”窗格右上方的“更多属性”菜单中的“提示文本”字段将提示文本添加到文本输入框/区域。 提示文本将出现在文本输入框/区域中,直到用户与之交互为止,此时该提示文本将消失,以允许用户根据需要填写输入。
Hint text is grey by default and appears in the font applied to the text field/area. To change the hint text's styling, select the :hint style effect at the top of the Interactions pane.提示文本默认为灰色,并应用于文本输入框/区域的字体显示。 要更改提示文本的样式,请在“交互”窗格顶部选择:提示样式效果。
You can choose whether the hint text will be hidden after the text field/area has been focused or after the user starts typing. Use the Hide After dropdown in the More Properties menu to make your selection.你可以选择在文本输入框/区域获取焦点之后还是在用户开始键入之后隐藏提示文本。 使用“更多属性”菜单中的“在之后隐藏”下拉菜单进行选择。
Input Types (Text Fields Only)输入类型(仅文本输入框)
You can give text field widgets different input types to denote their function in a user input form. Use the Type dropdown in the More Properties menu in the Interactions pane to select the input type for a text field.你可以为文本输入框部件提供不同的输入类型,在用户输入表单中定义其功能。 使用“交互”窗格中“更多属性”菜单中的“类型”下拉列表,为文本字段选择输入类型。
Keep in mind that web browsers often apply their own styling to certain types of text fields. In addition, when you select a text field on a mobile device, some field types will cause a different type of keyboard to appear, such as a number keypad instead of the alphanumeric keyboard.请注意,Web浏览器通常将自己的样式应用于某些类型的文本字段。 此外,当你在移动设备上选择文本字段时,某些字段类型将导致出现其他类型的键盘,例如数字小键盘而不是字母数字键盘。
Note注意
Text field types are a feature of HTML, not an invention of Axure's — we're just giving you access to them. As such, you'll find that certain field types are more applicable to working in Axure RP than others.文本输入框类型是HTML的功能,而不是Axure的发明-我们只是让你访问它们。 这样,你会发现某些字段类型比其他字段类型更适用于Axure RP。
The different types of fields and the results of using that field type are as follows:不同类型的字段以及使用该字段类型的结果如下:
Text文本: Default setting used for basic text entry用于基本文本输入的默认设置
Password密码: Text is masked as it is entered输入文字时将其屏蔽
Email邮件: May prompt an email keyboard on mobile devices可能会在移动设备上提示电子邮件键盘
Number数字: Only accepts numeric input, may prompt a numeric keyboard on mobile devices仅接受数字输入,可能会在移动设备上提示数字键盘
Phone Number手机号码: May prompt a dial pad on mobile devices可能会在移动设备上提示拨号盘
URL: May prompt a URL-entry keyboard on mobile devices可能会在移动设备上提示网址输入键盘
Search搜索: May add a search button to keyboard on mobile devices. Some web browsers may add an "X" icon you can click to clear the field
File: Changes the text field into a file-upload button in the web browser, which will open the device’s file browser when clicked (though it is not possible to upload a file to an Axure RP prototype)可以在移动设备上的键盘上添加搜索按钮。 某些Web浏览器可能会添加“ X”图标,你可以单击以清除该字段
Date日期: May prompt a browser-styled date picker or calendar control可能会提示使用浏览器样式的日期选择器或日历控件
Month月: May prompt a browser-styled month and year picker可能会提示使用浏览器样式的月份和年份选择器
Time时间: May prompt a browser-styled time picker可能会提示浏览器样式的时间选择器
Tab Order制表顺序
Tab order for text fields, text areas, and other form widgets is determined by their layer depth, as shown in the Outline pane. You can learn more about this and how to change a widget's tab order in the Organizing Widgets article.文本输入框,文本区域和其他表单窗小部件的制表顺序由其层深度确定,如“概要”窗格中所示。 你可以在“管理部件”文章中了解有关此内容以及如何更改部件制表顺序的更多信息。
Special Properties特殊属性
Maximum Length (Text Fields Only)最大长度(仅文本字段)
You can use the Max Length field in the More Properties menu in the Interactions pane to specify the maximum length of entry a text field will accept. The field will stop accepting additional text input once the maximum character length has been reached.你可以使用“交互”窗格中“更多属性”菜单中的“最大长度”字段来指定文本输入框将接受的最大输入长度。 一旦达到最大字符长度,该字段将停止接受其他文本输入。
Disabled禁用
Disabling a text field or text area prevents users from interacting with it in the web browser. This also activates the widget's :disabled style effect, making it appear greyed-out.禁用文本输入框或文本域可防止用户在Web浏览器中与其进行交互。 这也会激活部件的:禁用样式效果,使其显示为灰色。
There are two ways to disable a widget:有两种禁用部件的方法:
Check the Disabled checkbox in the More Properties menu of the Interactions pane.在“交互”窗格的“更多属性”菜单中,选中“禁用”复选框。
Disable the widget dynamically in the web browser with the Enable/Disable action. You can do this as part of any interaction, such as when the page loads or when a button is clicked.通过启用/禁用操作在Web浏览器中动态禁用窗口部件。 你可以在任何交互过程中执行此操作,例如在页面加载或单击按钮时。
Tip提示
You can dynamically enable a disabled widget in the web browser with the Enable/Disable action. Check out the Terms and Conditions tutorial for an example of how this can be done.你可以使用“启用/禁用”操作在Web浏览器中动态启用/禁用窗口部件。 请查看“条款和条件”教程,以获取有关如何完成此操作的示例。
Read Only只读
When you set a text field/area to "read only," the text already on the widget can be seen and selected in the web browser, but it can't be changed by the user. To set a text field/area to read only, check the Read Only checkbox in the More Properties menu in the Interactions pane.当你将文本输入框/文本域设置为“只读”时,可以在Web浏览器中看到和选择窗口部件上已经存在的文本,但是用户无法更改。 要将文本字段/区域设置为只读,请选中“交互”窗格中“更多属性”菜单中的“只读”复选框。
Special Interactions特殊属性
Capturing and Evaluating the Entered Text获取输入文本
You can access the text entered in a text field or text area via the text on widget value option in actions and conditions. For example, you can set the value of a global variable to the text on a text field/area in order to carry that text over to a different page.你可以通过操作和条件中的部件值上的文本选项访问在文输入框段或文本域中输入的文本。 例如,可以将全局变量的值设置为文本输入框/域上的文本,以将该文本带到另一个页面。
You can also evaluate a text field or text area's text in a condition to only execute a certain case if the text matches a particular value, as you might do when verifying a username and password combination.你还可以获取文本输入框或文本域的文本,使其仅在文本匹配特定值的情况下才执行特定情况,就像在验证用户名和密码组合时所做的那样。
Submit Button提交按钮
Pressing theENTERkey while a text field or text area has focus in the web browser can fire the Click or Tap event of another widget on the page, known as the text field/area's "submit button."当文本输入框或文本域在Web浏览器中获取焦点时,按ENTER键可以触发页面上另一个窗口部件的点击事件,称为文本输入框/文本域的“提交按钮”。
To assign a submit button to a text field/area:要将提交按钮分配到文本输入框/域:
Select the text field/area and click Show All in the lower section of the Interactions pane.选择文本字段/区域,然后单击“交互”窗格下部的“显示全部”。
Choose from a list of eligible widgets in the Submit Button dropdown.从“提交按钮”下拉列表中的可选择部件列表中进行选择。
To unassign the submit button, click Unassign Submit Button at the bottom of the dropdown.
要取消分配提交按钮,请单击下拉列表底部的取消分配提交按钮。