CN105045464A - 一种提示表单填写进度的方法和装置 - Google Patents

一种提示表单填写进度的方法和装置 Download PDF

Info

Publication number
CN105045464A
CN105045464A CN201510368492.4A CN201510368492A CN105045464A CN 105045464 A CN105045464 A CN 105045464A CN 201510368492 A CN201510368492 A CN 201510368492A CN 105045464 A CN105045464 A CN 105045464A
Authority
CN
China
Prior art keywords
form item
progress
scroll bar
list
content
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201510368492.4A
Other languages
English (en)
Inventor
郑茂钟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Nubia Technology Co Ltd
Original Assignee
Nubia Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Nubia Technology Co Ltd filed Critical Nubia Technology Co Ltd
Priority to CN201510368492.4A priority Critical patent/CN105045464A/zh
Publication of CN105045464A publication Critical patent/CN105045464A/zh
Pending legal-status Critical Current

Links

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种提示表单填写进度的方法和装置，属于浏览器领域，包含获取预先定义的表单及表单中的表单项；获得每个表单项对应滚动条在进度条总长中所占的长度；每获得一个表单项被填入内容的命令，进度条上增加相应表单项的滚动条长度并对所述滚动条填充颜色。本发明不仅提示用户填写表单的进度，还提升了用户与网站界面的交互效率，提升了用户操作体验。

Description

一种提示表单填写进度的方法和装置
技术领域
本发明涉及浏览器领域，尤其涉及一种提示表单填写进度的方法和装置。
背景技术
浏览器是人们访问互联网的必备工具，用于显示网页服务器或者文件系统的HTML文件(标准通用标记语言的一个应用)内容，并让用户与这些文件交互的一种软件工具。用户在填写表单时候，需要在页面上停留一段时间，现行很多网站对于表单填写界面设计比较简单，单一。现有技术中有些浏览器中设置进度条用于提示输入进度，但是该进度条只是单纯对表单操作的一个反应，或是对进度加载的一个形象体现，并无实际意义，只是起到趣味性的效果。
发明内容
本发明的主要目的在于提出一种提示表单填写进度的方法和装置，旨在现有技术中表单填写界面和进度条设计比较简单，不能很好的体现表单填写情况的问题。
为实现上述目的，本发明提供的一种提示表单填写进度的方法，包含以下步骤，
获取预先定义的表单及表单中的表单项；
获得每个表单项对应滚动条在进度条总长中所占的长度；
每获得一个表单项被填入内容的命令，进度条上增加相应表单项的滚动条长度并对所述滚动条填充颜色。
进一步的，每获得一个表单项被填入内容的命令后，检测表单项被填入内容的格式是否符合预定义格式，如果是，滚动条被填充代表正确状态的颜色；否则滚动条被填充代表错误状态的颜色。
进一步的，所述每个表单项对应的滚动条上设置一个标记，将所述标记与一色块关联起来，用于点击该色块时将鼠标的光标定位到关联的表单项。
进一步的，表单项中的内容被清除时，回滚表单项相应滚动条，清除标记。
进一步的，获取预先定义的表单的方法为DOM的document.getElementById的方法。
进一步的，获取预先定义的表单中的表单项的方法为querySelectorAll方法。
此外，为实现上述目的，本发明还提出一种提示表单填写进度的装置，包含，
获取单元，设置为获取预先定义的表单及表单中的表单项；
计算单元，设置为计算每个表单项对应滚动条在进度条总长中所占的长度；
滚动与填色执行单元，设置为每获得一个表单项被填入内容的命令，进度条上增加相应表单项的滚动条长度并对所述滚动条填充颜色。
进一步的，每获得一个表单项被填入内容的命令后，检测表单项被填入内容的格式是否符合预定义格式，如果是，滚动条被填充代表正确状态的颜色；否则滚动条被填充代表错误状态的颜色。
进一步的，所述每个表单项对应的滚动条上设置一个标记，将所述标记与一色块关联起来，用于点击该色块时将鼠标的光标定位到关联的表单项。
进一步的，表单项中的内容被清除时，回滚表单项相应滚动条，清除标记。
本发明提出的提示表单填写进度的方法和装置，在表单填写界面添加了一个进度条设计，进度条精确体现表单填写进度及填写是否正确，当用户输入表单项内容时，进度条也跟滚动，直到用户把所有文本框输入完成后，进度条也就全部加载完，且对表单项填写正确或错误给出清晰的提示，并帮助用户快速找到填写错误的表单项位置，使用非常方便。
附图说明
图1为本发明实施例一提供的提示表单填写进度的方法流程示意图；
图2为本发明实施例二提供的提示表单填写进度的方法流程示意图；
图3为本发明实施例三提供的提示表单填写进度的装置结构示意图；
图4为本发明实施例四提供的提示表单填写进度的装置结构示意图；
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
在后续的描述中，使用用于表示元件的诸如“模块”、“部件”或“单元”的后缀仅为了有利于本发明的说明，其本身并没有特定的意义。因此，"模块"与"部件"可以混合地使用。
实施例一
如图1所示，本发明实施例一提出一种提示表单填写进度的方法，包括：
S101，获取预先定义的表单及表单中的表单项；
具体的，通过DOM的document.getElementById的方法获取预先定义的表单(如:#from),然后通过querySelectorAll方法获取预定义表单中存在的表单项。
S102，获得每个表单项对应滚动条在进度条总长中所占的长度；
具体的，进度条代表整个表单的完成进度，整个表单的所有表单项都为空时，进度条显示完成进度0％，整个表单全部表单项都填充完成时，进度条滚动完成100％。表单内的每个表单项在进度条中所占有的长度百分比或者百分比长度为进度条的总长度除以表单上的表单项数获得，即每个表单项对应的滚动条的长度。
S103，每获得一个表单项被填入内容的命令，进度条上增加相应表单项的滚动条长度并对所述滚动条填充颜色。
具体的，当用户在表单中的表单项中填充内容，例如在填写文本框、文本区域或单选、多选、下拉框等操作，每在一项表单项内填入内容，进度条滚动该表单项在进度条中所占的百分比长度，即滚动表单项对应滚动条长度，同时对滚动条填充颜色。然后Javascript脚本判断判断表单项中填充内容格式是否正确，即填充内容的格式是否与预定义的格式一致，将填写正确格式内容的表单项在进度条中滚动的填充颜色设置为一种颜色，比如蓝色，如果检测到用户输入内容的格式不符合预先定义的格式，则在进度条中滚动的填充颜色设置为另一种颜色，比如红色，这样用户在填写表单项中即可知道填写格式是否正确，如果填写内容格式不正确，可以及时修改，缩短纠错时间。进度条的滚动速度基于CSS3过渡属性设置，可以通过修改页面样式属性值改变滚动条加载速度
当然，在需要更改表单项填写内容时，需要将先前填写的内容清除，当用户清除表单项文本框中内容时，表单项对应的滚动条回滚相应的百分比长度。
以上实现的提示表单填写进度的方法，通过进度条按照表单项完成的情况加载长度，来展示用户填写表单的进度，用户填写完所有表单项，进度条加载完成100％；进度条的分块颜色可以展示用户输入内容的格式不正确的表单项，点击进度条上带有警示的色块可将鼠标的光标定位到相应的表单项以便用户进行修改，大大提升了进度条的提示性能，帮助人们简便、直观了解表单的完成进度以及完成准确性。
实施例二
参照图2，本发明实施例二提出一种提示表单填写进度的方法，包括：
S201，获取预先定义的表单及表单中的表单项；
S202，获得每个表单项对应滚动条在进度条总长中所占的长度；
S203，每获得一个表单项被填入内容的命令，进度条上增加相应表单项的滚动条长度并对所述滚动条填充颜色；
S204，每获得一个表单项被填入内容的命令后，检测表单项被填入内容的格式是否符合预定义格式，如果是，滚动条被填充代表正确状态的颜色；否则滚动条被填充代表错误状态的颜色；
具体的，Javascript脚本判断判断表单项中填充内容格式是否正确，即填充内容的格式是否与预定义的格式一致，将填写正确格式内容的表单项在进度条中滚动的填充颜色设置为一种颜色，比如蓝色，如果检测到用户输入内容的格式不符合预先定义的格式，则在进度条中滚动的填充颜色设置为另一种颜色，比如红色，这样用户在填写表单项中即可知道填写格式是否正确，如果填写内容格式不正确，可以及时修改，缩短纠错时间。进度条的滚动速度基于CSS3过渡属性设置，可以通过修改页面样式属性值改变滚动条加载速度。
S205，每个表单项对应的滚动条上设置一个标记，将所述标记与一色块关联起来，用于点击该色块时将鼠标的光标定位到关联的表单项。
具体的，将该表单项对应的滚动条区域上定义一个标记，将关联的表单项与色块关联起来，点击该色块可将鼠标的光标定位到关联的表单项，帮助用户快速找到表单项所处的位置，进一步缩短纠错、检查时间。在需要更改表单项填写内容时，需要将先前填写的内容清除，当用户清除表单项文本框中内容时，表单项对应的滚动条回滚相应百分比长度，同时清除对应的关联与标记。
以上实现的提示表单填写进度的方法，通过点击进度条上带有警示的色块可将鼠标的光标定位到相应的表单项以便用户进行修改，大大提升了用户的纠错效率。
实施例三
参照图3，本发明实施例三提出一种提示表单填写进度的装置，包含获取单元10，计算单元20，滚动与填色执行单元30。
获取单元10，设置为获取预先定义的表单及表单中的表单项；
具体的，获取单元10通过DOM的document.getElementById的方法获取预先定义的表单(如:#from),然后通过querySelectorAll方法获取预定义表单中存在的表单项。
计算单元20，设置为计算每个表单项对应滚动条在进度条总长中所占的长度；
具体的，进度条代表整个表单的完成进度，整个表单的所有表单项都为空时，进度条显示完成进度0％，整个表单全部表单项都填充内容时，进度条滚动完成100％。计算单元20根据进度条的总长度除以表单上的表单项数获得表单内的每个表单项在进度条中所占有的长度百分比或者百分比长度，即每个表单项对应的滚动条的长度。
滚动与填色执行单元30，设置为每获得一个表单项被填入内容的命令，进度条上增加相应表单项的滚动条长度并对所述滚动条填充颜色。
具体的，当用户在表单中的表单项中填充内容，例如在在填写文本框、文本区域或单选、多选、下拉框等操作，每操作完一项表单项，滚动与填色执行单元30执行滚动该表单项在进度条中所占的百分比长度，并填充颜色。Javascript脚本判断判断表单项中填充内容格式是否正确，将填写正确格式内容的表单项在进度条中滚动的填充颜色设置为一种颜色，比如蓝色，如果检测到用户输入内容的格式不符合预先定义的格式，则在进度条中滚动的填充颜色设置为另一种颜色，比如红色，这样用户在填写表单项中即可知道填写格式是否正确，如果填写内容格式不正确，可以及时修改，缩短纠错时间。进度条的滚动速度基于CSS3过渡属性设置，可以通过修改页面样式属性值改变滚动条加载速度。在需要更改表单项填写内容时，需要将先前填写的内容清除，当用户清除表单项文本框中内容时，表单项对应的滚动条回滚相应百分比长度。
实施例四
参照图4，本发明实施例四提出一种提示表单填写进度的装置，包含获取单元10，计算单元20，滚动与填色执行单元30以及标记单元50和清除单元60，格式判断单元40。
获取单元10，计算单元20，滚动与填色执行单元30与实施例三相同，在此不再赘述。
格式判断单元40，设置为每获得一个表单项被填入内容的命令后，检测表单项被填入内容的格式是否符合预定义格式，如果是，滚动条被填充代表正确状态的颜色；否则滚动条被填充代表错误状态的颜色。
具体的，Javascript脚本判断判断表单项中填充内容格式是否正确，即填充内容的格式是否与预定义的格式一致，将填写正确格式内容的表单项在进度条中滚动的填充颜色设置为一种颜色，比如蓝色，如果检测到用户输入内容的格式不符合预先定义的格式，则在进度条中滚动的填充颜色设置为另一种颜色，比如红色，这样用户在填写表单项中即可知道填写格式是否正确，如果填写内容格式不正确，可以及时修改，缩短纠错时间。进度条的滚动速度基于CSS3过渡属性设置，可以通过修改页面样式属性值改变滚动条加载速度。
标记单元50，设置为在所述每个表单项对应的滚动条上设置一个标记，将所述标记与一色块关联起来，用于点击该色块时将鼠标的光标定位到关联的表单项。
清除单元60，设置为当表单项中的内容被清除时，回滚表单项相应滚动条，清除标记。
具体的，标记单元40将该表单项对应的滚动条区域上定义一个标记，将关联的表单项与色块关联起来，点击该色块可将鼠标的光标定位到关联的表单项，帮助用户快速找到表单项所处的位置，进一步缩短纠错、检查时间。在需要更改表单项填写内容时，需要将先前填写的内容清除，当用户清除表单项文本框中内容时，表单项对应的滚动条回滚相应百分比长度，同时清除对应的关联与标记。
以上实现的提示表单填写进度的装置，不仅提示用户填写表单的进度，还提升了用户与网站界面的交互效率，提高了用户操作体验。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种提示表单填写进度的方法，其特征在于包含以下步骤，
获取预先定义的表单及表单中的表单项；
获得每个表单项对应滚动条在进度条总长中所占的长度；
每获得一个表单项被填入内容的命令，进度条上增加相应表单项的滚动条长度并对所述滚动条填充颜色。
2.根据权利要求1所述的提示表单填写进度的方法，其特征在于，每获得一个表单项被填入内容的命令后，检测表单项被填入内容的格式是否符合预定义格式，如果是，滚动条被填充代表正确状态的颜色；否则滚动条被填充代表错误状态的颜色。
3.根据权利要求1所述的提示表单填写进度的方法，其特征在于，所述每个表单项对应的滚动条上设置一个标记，将所述标记与一色块关联起来，用于点击该色块时将鼠标的光标定位到关联的表单项。
4.根据权利要求3所述的提示表单填写进度的方法，其特征在于，表单项中的内容被清除时，回滚表单项相应滚动条，清除标记。
5.根据权利要求1所述的提示表单填写进度的方法，其特征在于，获取预先定义的表单的方法为DOM的document.getElementById的方法。
6.根据权利要求1所述的提示表单填写进度的方法，其特征在于，获取预先定义的表单中的表单项的方法为querySelectorAll方法。
7.一种提示表单填写进度的装置，其特征在于包含，
获取单元，设置为获取预先定义的表单及表单中的表单项；
计算单元，设置为计算每个表单项对应滚动条在进度条总长中所占的长度；
滚动与填色执行单元，设置为每获得一个表单项被填入内容的命令，进度条上增加相应表单项的滚动条长度并对所述滚动条填充颜色。
8.根据权利要求7所述的提示表单填写进度的装置，其特征在于：还包含格式判断单元，设置为每获得一个表单项被填入内容的命令后，检测表单项被填入内容的格式是否符合预定义格式，如果是，滚动条被填充代表正确状态的颜色；否则滚动条被填充代表错误状态的颜色。
9.根据权利要求7所述的提示表单填写进度的装置，其特征在于：所述每个表单项对应的滚动条上设置一个标记，将所述标记与一色块关联起来，用于点击该色块时将鼠标的光标定位到关联的表单项。
10.根据权利要求9所述的提示表单填写进度的装置，其特征在于：表单项中的内容被清除时，回滚表单项相应滚动条，清除标记。
CN201510368492.4A 2015-06-29 2015-06-29 一种提示表单填写进度的方法和装置 Pending CN105045464A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510368492.4A CN105045464A (zh) 2015-06-29 2015-06-29 一种提示表单填写进度的方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510368492.4A CN105045464A (zh) 2015-06-29 2015-06-29 一种提示表单填写进度的方法和装置

Publications (1)

Publication Number Publication Date
CN105045464A true CN105045464A (zh) 2015-11-11

Family

ID=54452042

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510368492.4A Pending CN105045464A (zh) 2015-06-29 2015-06-29 一种提示表单填写进度的方法和装置

Country Status (1)

Country Link
CN (1) CN105045464A (zh)

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105487780A (zh) * 2016-01-15 2016-04-13 腾讯科技（深圳）有限公司 控件显示方法及装置
CN105868349A (zh) * 2016-03-29 2016-08-17 北京派得伟业科技发展有限公司 一种作物品种区域试验数据采集方法
CN106776642A (zh) * 2015-11-24 2017-05-31 阿里巴巴集团控股有限公司 一种信息显示方法及装置
WO2017140217A1 (zh) * 2016-02-17 2017-08-24 阿里巴巴集团控股有限公司 一种展示业务完成状态的信息处理方法及装置
CN107329736A (zh) * 2017-05-22 2017-11-07 北京金山安全管理系统技术有限公司 信息的显示方法及装置、存储介质和处理器
CN109343778A (zh) * 2018-09-25 2019-02-15 北京金山安全软件有限公司 一种显示方法、装置及电子设备
CN112581202A (zh) * 2019-09-29 2021-03-30 北京向上一心科技有限公司 下单界面的展示方法、装置、计算机设备和存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TW200907778A (en) * 2007-04-16 2009-02-16 Ibm An interactive progress bar
CN102737011A (zh) * 2012-06-12 2012-10-17 上海量明科技发展有限公司 设置数据保存进度结构的方法及客户端
CN103365761A (zh) * 2012-03-09 2013-10-23 苹果公司 进度条
CN103761303A (zh) * 2014-01-22 2014-04-30 广东欧珀移动通信有限公司 一种图片的排列显示方法及装置
CN104063149A (zh) * 2014-06-13 2014-09-24 深圳市东信时代信息技术有限公司 一种可调进度条系统与方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TW200907778A (en) * 2007-04-16 2009-02-16 Ibm An interactive progress bar
CN103365761A (zh) * 2012-03-09 2013-10-23 苹果公司 进度条
CN102737011A (zh) * 2012-06-12 2012-10-17 上海量明科技发展有限公司 设置数据保存进度结构的方法及客户端
CN103761303A (zh) * 2014-01-22 2014-04-30 广东欧珀移动通信有限公司 一种图片的排列显示方法及装置
CN104063149A (zh) * 2014-06-13 2014-09-24 深圳市东信时代信息技术有限公司 一种可调进度条系统与方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
MR_YUAN24: "表单填写进度提示效果", 《HTTPS://BLOG.CSDN.NET/MR_YUAN24/ARTICLE/DETAILS/38880847》 *

Cited By (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106776642A (zh) * 2015-11-24 2017-05-31 阿里巴巴集团控股有限公司 一种信息显示方法及装置
CN105487780A (zh) * 2016-01-15 2016-04-13 腾讯科技（深圳）有限公司 控件显示方法及装置
WO2017140217A1 (zh) * 2016-02-17 2017-08-24 阿里巴巴集团控股有限公司 一种展示业务完成状态的信息处理方法及装置
CN107092452A (zh) * 2016-02-17 2017-08-25 阿里巴巴集团控股有限公司 一种展示业务完成状态的信息处理方法及装置
US10871870B2 (en) 2016-02-17 2020-12-22 Advanced New Technologies Co., Ltd. Information processing method and device for displaying service completion status
CN105868349A (zh) * 2016-03-29 2016-08-17 北京派得伟业科技发展有限公司 一种作物品种区域试验数据采集方法
CN107329736A (zh) * 2017-05-22 2017-11-07 北京金山安全管理系统技术有限公司 信息的显示方法及装置、存储介质和处理器
CN107329736B (zh) * 2017-05-22 2020-12-22 北京金山安全管理系统技术有限公司 信息的显示方法及装置、存储介质和处理器
CN109343778A (zh) * 2018-09-25 2019-02-15 北京金山安全软件有限公司 一种显示方法、装置及电子设备
CN112581202A (zh) * 2019-09-29 2021-03-30 北京向上一心科技有限公司 下单界面的展示方法、装置、计算机设备和存储介质

Similar Documents

Publication Publication Date Title
CN105045464A (zh) 一种提示表单填写进度的方法和装置
CA2824922C (en) Formatting data by example
CN102591961B (zh) 一种制作数据图表的方法及系统
EP2687995A1 (en) Browser and method thereof for adding and displaying comments about web picture
CN104063401B (zh) 一种网页样式地址合并的方法和装置
CN102411614A (zh) 图像搜索结果的显示
CN108664461B (zh) 一种网页表单自动填写方法及装置
CN103714115A (zh) 一种网页内容的加载方法和装置
CN105045645A (zh) 网页加载方法、装置及系统
CN103605502A (zh) 表单页面显示方法及服务器
CN105094779A (zh) 一种页面设计方法
CN104375812A (zh) 网页内容修改模板的构建方法、网页内容修改方法及系统
CN107943466B (zh) 数据库访问语句生成方法、装置及设备
CN107391357A (zh) 应用崩溃重现方法、装置及移动终端
US20150040043A1 (en) Visual Design Evaluation
CN104572057A (zh) 滚动条控制方法及装置
CN102768663A (zh) 一种网页标题的提取方法、装置及信息处理系统
CN104050218A (zh) 用于提供要显示在用户界面中的信息的方法和系统
CN106168959A (zh) 网页布局方法及装置
CN105069092A (zh) 一种报表展示的方法、系统及移动终端
CN103605449A (zh) 静态页面的交互方法及装置
CN104346174B (zh) 一种在线矢量图建模过程的描述与重现方法
CN107220351A (zh) 页面留白宽度计算方法、装置、存储介质和电子设备
JP6403527B2 (ja) 設計流用支援装置、設計流用支援方法およびプログラム
CN103020033A (zh) 一种支持离线使用的电子表单系统及构建方法和电子表单

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20151111