CN110321045A

CN110321045A - 用于表单项提示信息显示方法及装置

Info

Publication number: CN110321045A
Application number: CN201810295876.1A
Authority: CN
Inventors: 吕文涛
Original assignee: Alibaba Group Holding Ltd
Current assignee: Alibaba Group Holding Ltd
Priority date: 2018-03-30
Filing date: 2018-03-30
Publication date: 2019-10-11

Abstract

本发明公开了一种用于表单项提示信息显示方法，包括：接收对待输入表单项输入区域的触发操作；判断所述待输入表单项是否预设提示信息；若是，则获取所述待输入表单项的提示信息，唤出输入键盘，并将所述提示信息显示于所述输入键盘的预设区域。本发明通过一种用于表单项提示信息显示方法，在用户在待输入表单项的信息输入框输入信息时，使提示文字始终保持在输入键盘的预设区域，保证用户输入时提示文字的可见性，同时节约屏幕空间。

Description

用于表单项提示信息显示方法及装置

技术领域

本发明涉及移动端网页表单领域，具体涉及一种用于表单项提示信息显示方法。本申请同时涉及一种用于表单项提示信息显示装置。

背景技术

许多手机网页都有需要用户进行文字输入的表单项，这些表单项是通过web页面中的input或textarea元素生成的，主流的表单项分为三个部分：标签、提示文字和输入框。为了实现这样的web页面界面，开发者在编写html代码时通常是利用<input>标签来生成输入框，利用<label>标签生成标签，而提示文字则是利用<input>标签的placeholder属性来生成。利用input标签的placeholder属性在输入框中呈现灰色的提示文本，当用户在该表单项的输入框内输入文字时，提示文字会自动消失，无法起到持续提示的作用。

为了解决这个问题，现有技术是将提示文字固定在页面中，保证用户在输入时也能看见相应的提示文字。

由于移动端相对于PC端来说屏幕尺寸更小，能够放置的内容也更少，因此在设计表单界面时需要考虑屏幕尺寸对整个界面布局的影响。在页面中固定提示文字的方式最大的缺点就是占用宝贵的移动端屏幕空间，这个问题在表单元素较多的情况尤其突出。另外在用户完成表单项的输入后，提示文字也就没有存在的意义了。

发明内容

本申请提供一种用于表单项提示信息显示方法，以解决现有的移动端提示信息显示方法浪费屏幕空间的问题。本申请另外提供一种用于表单项提示信息显示装置。

本申请提供一种用于表单项提示信息显示方法，包括：

接收对待输入表单项输入区域的触发操作；

判断所述待输入表单项是否预设提示信息；

若是，则获取所述待输入表单项的提示信息，唤出输入键盘，并将所述提示信息显示于所述输入键盘的预设区域。

可选的，所述判断所述待输入表单项是否预设提示信息步骤之后还包括：

若否，则只唤出所述输入键盘。

可选的，所述判断所述待输入表单项是否预设提示信息具体包括：

判断所述待输入表单项是否有placeholder属性；

若有，则提取所述placeholder的值，将所述placeholder的值作为提示信息。

可选的，所述若否，则只唤出所述输入键盘步骤之后还包括：

判断所述待输入表单项是否输入结束；

若结束，则隐藏所述输入键盘，并将在所述输入键盘预设区域显示的所述提示信息一并隐藏；

若没有结束，则返回所述判断所述待输入表单项是否输入结束的步骤。

可选的，所述判断所述待输入表单项是否预设提示信息步骤之前还包括：

预先配置网页中所述待输入表单项的提示信息。

可选的，所述将所述提示信息显示于所述输入键盘的预设区域步骤之前还包括：

在所述输入键盘的显示区域划分所述提示信息显示的预设区域。

本申请另外提供一种用于表单项提示信息显示装置，所述装置包括：

接收模块，用于接收对待输入表单项输入区域的触发操作；

第一判断模块，用于判断所述待输入表单项是否预设提示信息；具体用于：

可选的，所述第一判断模块还具体用于：

若否，则只唤出所述输入键盘。

可选的，所述装置还包括：

第二判断模块，用于判断所述待输入表单项是否输入结束；

可选的，所述装置还包括：

配置模块，用于预先配置网页中所述待输入表单项的提示信息。

可选的，所述装置还包括：

划分模块，用于在所述输入键盘的显示区域划分所述提示信息显示的预设区域。

本申请另外提供一种用于表单项提示信息显示的电子设备，所述电子设备包括：

显示器；

处理器；

存储器，用于存储接收对待输入表单项输入区域触发操作；

判断所述待输入表单项是否预设提示信息；

与现有技术相比，本发明具有以下优点：

本申请提供的用于表单项提示信息显示方法在接收用户对待输入表单项输入区域的触发操作的情况下，通过判断所述表单项是否有提示信息，若有，则获取所述待输入表单项的提示信息，并将所述提示信息显示在输入键盘的预设区域。本发明通过一种用于表单项提示信息显示方法，在用户在待输入表单项的信息输入框输入信息时，使提示文字始终保持在输入键盘的预设区域，保证用户输入时提示文字的可见性，同时节约屏幕空间。

进一步的，在用户在待输入表单项的信息输入框中结束输入之后，隐藏输入键盘，并将提示文字随着输入键盘的隐藏一并隐藏。较好地解决了将提示文字固定在页面中的显示方式，完成输入之后提示文字没有存在意义的问题。

附图说明

图1是本申请第一实施例提供的用于表单项提示信息显示方法的流程图；

图2是本申请第一实施例提供的用于表单项提示信息显示方法的另一流程图；

图3是本申请第一实施例提供的用于表单项提示信息显示方法的另一流程图；

图4是本申请第一实施例涉及的移动端web登录界面；

图5是本申请第一实施例涉及的将提示文字固定在页面中的web登录界面；

图6是本申请第一实施例提供的用于表单项提示信息显示方法的web登录界面；

图7是本申请第二实施例提供的用于表单项提示信息显示装置的结构框图；

图8是本申请第二实施例提供的用于表单项提示信息显示装置的另一结构框图。

具体实施方式

在下面的描述中阐述了很多具体细节以便于充分理解本发明。但是本发明能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本发明内涵的情况下做类似推广，因此本发明不受下面公开的具体实施的限制。

本申请实施例提供一种用于表单项提示信息显示方法。请参看图1，该图为本申请第一实施例的流程图。请同时参看图2、图3，为本申请第一实施例提供的另外两个流程图。以下结合图1、图2、图3对本申请第一实施例提供一种用于表单项提示信息显示方法进行详细说明。

如图1所示，示出了本申请第一实施例提供的用于表单项提示信息显示方法的流程图，包括以下步骤。

步骤S101，接收对待输入表单项输入区域的触发操作。

本步骤用于接收对待输入表单项输入区域的触发操作。本申请应用于移动端，由于移动端相对于PC端来说屏幕尺寸更小，能够放置的内容也更少，因此在设计表单界面(如图4)时需要考虑屏幕尺寸对整个界面布局的影响。在页面中固定提示文字的方式(如图5)最大的缺点就是占用宝贵的移动端屏幕空间，这个问题在表单元素较多的情况尤其突出，本申请就是针对这个问题提出的技术方案。

表单，表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

表单项，表单项为表单中单一的一项，主流的表单项分为三个部分：标签、信息输入框、提示信息。

请参看图6，接收用户对待输入表单项输入区域的触发操作，例如接收用户触发“登录名”表单项的操作，获取用户点击“登录名”表单项的信息输入框的操作，用于之后识别“登录名”表单项的属性。“登录名”表单项其中含有标签(例如，<input>标签)、提示信息(例如，邮箱、会员名、8位ID)和信息输入框(例如，登录名输入框)，

步骤S102，判断所述待输入表单项是否预设提示信息。

本步骤用于判断所述待输入表单项是否预设提示信息。主流的表单项分为三个部分：标签、信息输入框、提示信息。

标签，HTML不是一种编程语言，而是一种标记语言，HTML使用标记标签来描述网页。HTML标记标签通常被称为HTML标签(HTML tag)。HTML标签是由尖括号包围的关键词，比如<html>。HTML标签通常是成对出现的，比如<b>和</b>，标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。利用<label>标签生成标签。

信息输入框，利用<input>标签来生成的输入框。

提示信息，是利用<input>标签的placeholder属性来生成的提示文字，placeholder属性规定描述文本区域预期值的简短提示。该提示文字会在文本区域为空时显示，当用户在信息输入框内输入文字时消失。

请参看图4，其中提示信息置于输入框内，当用户在该表单项的输入框内输入文字时，提示信息会自动消失，无法起到持续提示的作用。为了解决这个问题，现有的方法是将提示文字固定在页面中(如图5)，提示文字“邮箱/会员名/8位ID”固定在登录名信息输入框的下方，保证用户在输入时也能看见相应的提示文字。本申请应用于移动端，由于移动端相对于PC端来说屏幕尺寸更小，能够放置的内容也更少，因此在设计表单界面时需要考虑屏幕尺寸对整个界面布局的影响。在页面中固定提示文字的方式占用宝贵的移动端屏幕空间，这个问题在表单元素较多的情况尤其突出。因此，本申请不再采用将提示信息固定在页面中的方式进行显示。

在接收用户对待输入表单项的触发操作后，对待输入表单项的属性进行识别，判断其是否含有提示信息。例如，请参看图6，接收用户触发“登录名”表单项的操作，获取用户点击“登录名”表单项的信息输入框的操作之后，识别“登录名”表单项的属性，判断“登录名”表单项是否有提示信息“邮箱、会员名、8位ID”。

优选地，所述步骤S102具体包括：判断所述待输入表单项是否有placeholder属性；若有，则提取所述placeholder的值，将所述placeholder的值作为提示信息。

placeholder属性，在信息输入框的声明标签上加入placeholder属性，placeholder属性规定描述文本区域预期值的简短提示，该提示会在文本区域为空时显示，当字段获得焦点时消失。

placeholder的值，placeholder属性所对应的文字信息，即所述提示信息。

通过判断待输入表单项是否有利用<input>标签的placeholder属性，来识别待输入表单项的属性。若所述待输入表单项含有placeholder属性，则提取所述placeholder的值，将所述placeholder的值作为提示信息。例如，请参看图6，接收用户触发“登录名”表单项的操作，获取用户点击“登录名”表单项的信息输入框的操作之后，判断“登录名”表单项是否有利用<input>标签的placeholder属性，若所述“登录名”表单项含有placeholder属性，则提取所述placeholder的值“邮箱、会员名、8位ID”，将所述placeholder的值“邮箱、会员名、8位ID”作为提示信息。

优选地，请参看图3，在步骤S102之前还包括以下步骤，步骤S108，预先配置网页中所述待输入表单项的提示信息。

本步骤用于配置所述网页中的待输入表单项的提示信息。

提示信息是利用<input>标签的placeholder属性来生成的提示文字，placeholder属性规定描述文本区域预期值的简短提示。

placeholder这个属性是HTML5中新增的属性，该属性的作用是规定可描述输入字段预期值的简短的提示信息，该提示会在用户输入之前显示在输入字段中，会在用户输入后消失。

placeholder属性在信息输入框的声明标签上加入，适用于下面的input类型：text、search、url、tel、email和password。本实施例不作具体的限定，input类型可以是文本框也可以是搜索框等等，以input类型为text举例，通过以下的html代码生成提示信息：

Placeholder属性生成的提示信息的样式可以通过相应的代码进行更改，例如文字的字体、颜色和风格等。请参看图4，其中提示信息以浅灰色的文字置于输入框内。预先配置所述网页中的表单项的提示信息，利用<input>标签来生成信息输入框，利用<label>标签生成标签，利用<input>标签的placeholder属性来生成提示信息，为之后判断所述表单项是否有提示信息作准备。

需要说明的是，因为placeholder属性是HTML5中新增的属性，所以会存在兼容性问题。IE10+、Firefox、Opera、Chrome和Safari均支持placeholder属性，IE9及以下版本不支持input的placeholder属性。如果用户的浏览器不支持placeholder属性，需要借助MooTools，Dojo，或其它JavaScript工具来使浏览器支持placeholder属性。

步骤S103，若是，则获取所述待输入表单项的提示信息，唤出输入键盘，并将所述提示信息显示于所述输入键盘的预设区域。本步骤用于获取所述待输入表单项的提示信息，并将所述提示信息显示在所述输入键盘的预设区域。

在移动端网页中，在用户激活表单项时，会自动弹出待输入表单项的输入键盘，以便用户在待输入表单项的信息输入框中进行相关文字的输入。输入键盘一般位于表单项的正下方，具体放在屏幕的哪个位置根据不同的配置有所不同(如图6)。

当用户点击待输入表单项，唤出输入键盘时，判断待输入表单项是否含有利用<input>标签的placeholder属性来生成的提示信息，若有，则获取该提示信息，并将该提示信息显示在所述输入键盘的预设区域。在用户在待输入表单项的信息输入框输入信息时，将提示信息始终显示在输入键盘的预设区域，保证用户在信息输入框输入信息时提示信息的可见性，同时节约屏幕空间。

例如，请参看图6，当用户点击第一个“登录名”表单项时，判断该“登录名”表单项是否含有利用<input>标签的placeholder属性来生成的提示信息“邮箱/会员名/8位ID”，如果含有，则获取该信息，并将“邮箱/会员名/8位ID”显示在输入键盘的上方(预设区域即为输入键盘的上方)，作为输入键盘的一部分。

优选地，请参看图3，在步骤S103之前还包括以下步骤，步骤S109，在所述输入键盘的显示区域划分所述提示信息显示的预设区域。

本步骤用于在所述输入键盘的显示区域划分所述提示信息显示的预设区域。

提示信息显示的区域需要提前划分，具体放置在输入键盘的哪个位置根据不同的输入键盘的布局和尺寸不同，本申请应用于移动端，提示信息显示的预设区域可以位于输入键盘的上方、下方、左方、右方或者任意一个输入键盘的空白处，在此处不作限定。当判断待输入表单项含有利用<input>标签的placeholder属性来生成的提示信息时，获取该提示信息，并将该提示信息显示在所述输入键盘的预设区域，作为输入键盘的一部分。

优选地，如图2所示，示出了本申请第一实施例提供的用于表单项提示信息显示方法的另一流程图，在步骤S102之后还包括以下步骤：

步骤S104，若否，则只唤出输入键盘。

本步骤用于在待输入表单项不含有提示信息时，只唤出输入键盘。在用户激活表单项的情况下，会显示待输入表单项的输入键盘，当待输入表单项含有提示信息时，将提示信息随输入键盘一起唤出，当待输入表单项不含有提示信息时，只唤出普通的输入键盘。

优选地，如图3所示，示出了本申请第一实施例提供的用于表单项提示信息显示方法的另一流程图，在步骤S104之后还包括以下步骤：

步骤S105，判断所述待输入表单项是否输入结束；

本步骤用于判断所述待输入表单项是否结束输入，为之后隐藏输入键盘作准备。

步骤S106，若结束，则隐藏所述输入键盘，并将在所述输入键盘预设区域显示的所述提示信息一并隐藏。

本步骤用于隐藏输入键盘，并将在所述输入键盘预设区域显示的所述提示信息一并隐藏。

通过判断所述待输入表单项是否预设利用<input>标签的placeholder属性来生成的提示信息，若所述待输入表单项含有提示信息，则在用户在信息输入框输入信息时，将提示信息始终显示在输入键盘的预设区域，保证用户在信息输入框输入信息时提示信息的可见性，同时节约屏幕空间。在用户在信息输入框输入结束后，将输入键盘隐藏，将所述提示信息随着输入键盘的隐藏一并隐藏。请参看图5，在页面中固定提示文字的方式在用户完成表单项的输入后，提示文字也就没有存在的意义了，将所述提示信息随着输入键盘的隐藏一并隐藏的方式很好的解决了这个问题。

需要说明的是输入键盘的隐藏可以是自动的也可以是人为操作隐藏，当用户在信息输入框结束输入后，可以通过键盘上的隐藏按钮进行隐藏，也可以预先配置相应的程序使输入键盘在用户在信息输入框结束输入之后自动隐藏。在输入键盘隐藏之后，在输入键盘预设区域显示的提示信息随之一并隐藏。

步骤S107，若没有结束，则返回所述判断所述待输入表单项是否结束输入的步骤。

本步骤用于在所述用户信息没有结束输入时，返回所述判断待输入表单项是否结束输入的步骤。在用户结束输入时的情况下，会隐藏输入键盘，将提示信息随输入键盘一并隐藏，当用户没有结束输入时的情况下，不会隐藏输入键盘。

如图7所示，示出了本申请第二实施例提供的用于表单项提示信息显示装置的结构框图，包括以下模块：

接收模块701，用于接收对待输入表单项输入区域的触发操作；

第一判断模块702，用于判断所述待输入表单项是否预设提示信息；具体用于：若是，则获取所述待输入表单项的提示信息，唤出输入键盘，并将所述提示信息显示于所述输入键盘的预设区域。

若否，则只唤出所述输入键盘。

如图8所示，示出了本申请第二实施例提供的用于表单项提示信息显示装置的另一结构框图，所述装置还包括以下模块：

第二判断模块703，用于判断所述用户信息是否结束输入；

配置模块704，用于预先配置网页中所述待输入表单项的提示信息。

划分模块705，用于在所述输入键盘的显示区域划分所述提示信息显示的预设区域。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

1、计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

2、本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

Claims

1.一种用于表单项提示信息显示方法，其特征在于，包括：

接收对待输入表单项输入区域的触发操作；

判断所述待输入表单项是否预设提示信息；

2.根据权利要求1所述的用于表单项提示信息显示方法，其特征在于，所述判断所述待输入表单项是否预设提示信息步骤之后还包括：

若否，则只唤出所述输入键盘。

3.根据权利要求1所述的用于表单项提示信息显示方法，其特征在于，所述判断所述待输入表单项是否预设提示信息具体包括：

判断所述待输入表单项是否有placeholder属性；

4.根据权利要求2所述的用于表单项提示信息显示方法，其特征在于，所述若否，则只唤出所述输入键盘步骤之后还包括：

判断所述待输入表单项是否输入结束；

5.根据权利要求1所述的用于表单项提示信息显示方法，其特征在于，所述判断所述待输入表单项是否预设提示信息步骤之前还包括：

预先配置网页中所述待输入表单项的提示信息。

6.根据权利要求1所述的用于表单项提示信息显示方法，其特征在于，所述将所述提示信息显示于所述输入键盘的预设区域步骤之前还包括：

7.一种用于表单项提示信息显示装置，其特征在于，所述装置包括：

接收模块，用于接收对待输入表单项输入区域的触发操作；

8.根据权利要求7所述的用于表单项提示信息显示装置，其特征在于，所述装置还包括：

第二判断模块，用于判断所述待输入表单项是否输入结束；

9.根据权利要求7所述的用于表单项提示信息显示装置，其特征在于，所述装置还包括：

10.一种用于表单项提示信息显示的电子设备，其特征在于，所述电子设备包括：

显示器；

处理器；

存储器，用于存储接收对待输入表单项输入区域触发操作；

判断所述待输入表单项是否预设提示信息；