一种表单数据输入方法技术

技术编号:39782854 阅读:9 留言:0更新日期:2023-12-22 02:25
本申请涉及计算机领域,公开了一种表单数据输入方法

【技术实现步骤摘要】
一种表单数据输入方法、装置、介质


[0001]本申请涉及计算机领域,特别是涉及一种表单数据输入方法

装置

介质


技术介绍

[0002]在用户浏览网页或使用应用程序时,需要向网页和应用程序中的表单输入数据(例如:用户名信息

文本信息和选择选项等)以获取服务

下拉框是一种常用的获取用户数据的组件

目前常用的下拉框组件包括
ElementUI
提供的
el

select
组件和
iviewUI
所提供的
select
组件,但这些下拉框组件通常以文档对象模型(
Document Object Model

DOM
)元素保存输入框的下拉选项数据,在下拉选项过多时,会影响页面的加载速度,导致页面卡顿,影响用户的使用体验

[0003]由此可见,如何提供一种新的表单数据输入方法,以防止下拉框下拉选项过多影响页面加载速度,是本领域技术人员亟需解决的问题


技术实现思路

[0004]本申请的目的是为了解决现有技术中通过下拉框向表单中输入数据时,由于页面中以
DOM
元素形式存储的下拉框选项过多导致页面数据过多,影响页面的加载速度,为了解决这一技术问题,本申请提供了一种表单数据输入方法

装置

介质,以减少页面中文档对象模型元素的数据量,提高页面的响应速度和用户的使用体验

[0005]为了解决上述技术问题,本申请提供了一种表单数据输入方法,包括:响应于用户所发送的数据输入请求以获取用户输入数据;根据预设匹配规则确定与所述用户输入数据对应的目标下拉选项;根据所述目标下拉选项生成文档对象模型元素,并在下拉选项界面显示所述目标下拉选项;获取用户选择数据,以将所述用户选择数据输入至表单,并清除所述文档对象模型元素

[0006]优选的,所述预设匹配规则包括:拼音匹配

模糊匹配;相应的,所述根据预设匹配规则确定与所述用户输入数据对应的目标下拉选项包括:确定下拉选项库中与各所述预设匹配规则对应的目标下拉选项;其中,所述下拉选项库为设置于前端本地存储

并用于保存原始选项数据的数据库

[0007]优选的,所述确定下拉选项库中与各所述预设匹配规则对应的目标下拉选项包括:获取各所述预设匹配规则的优先级信息,并对各所述预设匹配规则进行优先级排序;按照各所述预设匹配规则的优先级顺序,依次确定与各所述预设匹配规则对应的所述目标下拉选项

[0008]优选的,还包括:获取用户通过表单输入按钮所输入的匹配规则选择指令;根据所述匹配规则选择指令确定各所述预设匹配规则的优先级信息

[0009]优选的,所述根据所述目标下拉选项生成文档对象模型元素包括:获取所述前端本地存储中的所述原始选项数据;根据所述原始选项数据,在所述下拉选项界面中渲染出与所述原始选项数据的文档对象模型元素

[0010]优选的,还包括:为各所述目标下拉选项创建
Vue
实例,并对所述目标下拉选项的属性信息进行数据劫持,以对所述
Vue
实例的数据进行处理;编译所述
Vue
实例,解析所述
Vue
实例的指令和表达式,并创建相应的监听器,以获取各所述目标下拉选项的依赖数据,从而建立各所述目标下拉选项与监听器间的关联关系

[0011]优选的,所述根据预设匹配规则确定与所述用户输入数据对应的目标下拉选项的步骤后,还包括:若下拉选项库中不存在与所述用户输入数据对应的所述目标下拉选项,则记录所述用户输入数据和与所述用户输入数据对应的后台信息;根据所述用户输入数据和所述后台信息生成新的下拉选项数据,并将所述下拉选项数据保存至所述下拉选项库中,以更新所述下拉选项库

[0012]为了解决上述技术问题,本申请还提供了一种表单数据输入装置,包括:获取模块,用于响应于用户所发送的数据输入请求以获取用户输入数据;确定模块,用于根据预设匹配规则确定与所述用户输入数据对应的目标下拉选项;生成模块,用于根据所述目标下拉选项生成文档对象模型元素,并在下拉选项界面显示所述目标下拉选项;清除模块,用于获取用户选择数据,以将所述用户选择数据输入至表单,并清除所述文档对象模型元素

[0013]为了解决上述技术问题,本申请还提供了一种表单数据输入装置,包括存储器,用于存储计算机程序;处理器,用于执行所述计算机程序时实现所述的表单数据输入方法的步骤

[0014]为了解决上述技术问题,本申请还提供了一种计算机可读存储介质,所述计算机可读存储介质上存储有计算机程序,所述计算机程序被处理器执行时实现所述的表单数据输入方法的步骤

[0015]本申请提供了一种表单数据输入方法,包括:响应于用户所发送的数据输入请求以获取用户输入数据;根据预设匹配规则确定与用户输入数据对应的目标下拉选项;根据目标下拉选项生成文档对象模型元素,并在下拉选项界面显示目标下拉选项;获取用户选择数据,以将用户选择数据输入至表单,并清除文档对象模型元素

由此可见,本申请所提供的技术方案,通过在用户输入数据时,根据与用户输入数据对应的目标下拉选项生成文档对象模型元素,以便于用户选择,并在完成数据输入后,将文档对象模型元素清除,以减
少页面中文档对象模型元素的数据量,从而提高页面的响应速度

[0016]此外,本申请还提供了一种表单数据输入装置

介质,与上述方法对应,效果同上

附图说明
[0017]为了更清楚地说明本申请实施例,下面将对实施例中所需要使用的附图做简单的介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图

[0018]图1为本申请实施例所提供的一种表单数据输入方法的流程图;图2为本申请实施例所提供的一种表单数据输入装置的结构图;图3为本申请实施例所提供的另一种表单数据输入装置的结构图

具体实施方式
[0019]下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚

完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部实施例

基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下,所获得的所有其他实施例,都属于本申请保护范围

[0020]本申请的核心是提供一种表单数据输入方法

装置

介质,以减少页面本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.
一种表单数据输入方法,其特征在于,包括:响应于用户所发送的数据输入请求以获取用户输入数据;根据预设匹配规则确定与所述用户输入数据对应的目标下拉选项;根据所述目标下拉选项生成文档对象模型元素,并在下拉选项界面显示所述目标下拉选项;获取用户选择数据,以将所述用户选择数据输入至表单,并清除所述文档对象模型元素
。2.
根据权利要求1所述的表单数据输入方法,其特征在于,所述预设匹配规则包括:拼音匹配

模糊匹配;相应的,所述根据预设匹配规则确定与所述用户输入数据对应的目标下拉选项包括:确定下拉选项库中与各所述预设匹配规则对应的所述目标下拉选项;其中,所述下拉选项库为设置于前端本地存储

并用于保存原始选项数据的数据库
。3.
根据权利要求2所述的表单数据输入方法,其特征在于,所述确定下拉选项库中与各所述预设匹配规则对应的所述目标下拉选项包括:获取各所述预设匹配规则的优先级信息,并对各所述预设匹配规则进行优先级排序;按照各所述预设匹配规则的优先级顺序,依次确定与各所述预设匹配规则对应的所述目标下拉选项
。4.
根据权利要求3所述的表单数据输入方法,其特征在于,还包括:获取用户通过表单输入按钮所输入的匹配规则选择指令;根据所述匹配规则选择指令确定各所述预设匹配规则的优先级信息
。5.
根据权利要求2所述的表单数据输入方法,其特征在于,所述根据所述目标下拉选项生成文档对象模型元素包括:获取所述前端本地存储中的所述原始选项数据;根据所述原始选项数据,在所述下拉选项界面中渲染出与所述原始选项数据的文档对象模型元素
。6.
根据权利要求1至5任一项所述的表单数据输入方法,其特征在于,还包括:为各所述目标...

【专利技术属性】
技术研发人员:金晓磊陈晓丽吕建
申请(专利权)人:杭州安恒信息技术股份有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1