CN112068826B - 文本输入的控制方法、系统、电子设备和存储介质 - Google Patents

Abstract

本发明提供一种文本输入的控制方法、控制系统、电子设备和存储介质。所述控制方法包括以下步骤：获取向web页面上的文本输入框中提供的不可编辑文本内容，所述web页面上的文本输入框采用div元素实现；根据所述不可编辑文本内容创建Image对象；基于所述Image对象和所述div元素在所述文本输入框中添加所述不可编辑文本内容；以及将所述不可编辑文本内容解析为相应内容。本发明对于不可编辑文本内容，利用div元素和image对象的特性将不可编辑文本转换为div元素上的一个图像节点，从而实现文本输入框内的不可编辑文本内容。

Description

文本输入的控制方法、系统、电子设备和存储介质

技术领域

本发明涉及网页设计技术，具体涉及一种文本输入的控制方法、系统、电子设备和存储介质。

背景技术

网页设计时，文本输入框是开发人员经常使用的表单元素，用于获取用户输入的图文信息。相关技术中，一方面，开发人员可以采用input、text-area、div等html(hypertext markup language，超文本标记语言)标签实现文本输入框；另一方面，开发人员也可以下载富文本编辑器的源代码以实现文本输入框。通常情况下，在将表单信息提交给服务端或者其他客户端应用之前，用户可以任意修改文本输入框内的文本内容。

随着文本输入框的使用场景越来越多，文本输入框被赋予了一种新的需求：即需要文本输入框内的一些文本内容是可以随意编辑的，另一些文本内容则不可以随意编辑。然而，现有技术无法实现该需求。

发明内容

有鉴于此，本发明提供一种文本输入的控制方法、系统、电子设备和存储介质，以实现一些文本内容可以随意编辑，另一些文本内容不可以随意编辑的文本输入框。

根据本发明的第一方面，提供一种文本输入的控制方法，包括以下步骤：

获取向web页面上的文本输入框中提供的不可编辑文本内容，所述web页面上的文本输入框采用div元素实现；

根据所述不可编辑文本内容创建Image对象；

基于所述Image对象和所述div元素在所述文本输入框中添加所述不可编辑文本内容；以及

将所述不可编辑文本内容解析为相应内容。

在一个可选的实施例中，所述不可编辑文本内容被包含在第一字符串内，所述第一字符串还包含svg标签，所述根据所述不可编辑文本内容创建Image对象包括：根据所述第一字符串创建Image对象。

在一个可选的实施例中，所述控制方法还包括：对所述不可编辑文本内容进行样式设定。

在一个可选的实施例中，所述根据所述不可编辑文本内容创建Image对象包括：

在浏览器加载所述web页面时，根据所述不可编辑文本内容创建作为正本的Image对象；

在所述获取向web页面上的文本输入框中提供的不可编辑文本内容的步骤之后，克隆所述正本的Image对象，以得到作为副本的Image对象，

则基于所述Image对象和所述div元素在所述文本输入框中添加所述不可编辑文本内容所述添加到所述div元素中为：

基于所述副本的Image对象和所述div元素在所述文本输入框中添加所述不可编辑文本内容所述添加到所述div元素中。

在一个可选的实施例中，还包括：

获取向所述web页面上的文本输入框中提供的可编辑文本内容；以及

基于浏览器的默认响应将所述可编辑文本内容添加到所述文本输入框中。

在一个可选的实施例中，经由按钮向所述web页面上的文本输入框中提供所述不可编辑文本内容，通过键盘向所述web页面上的文本输入框中提供所述可编辑文本内容。

在一个可选的实施例中，将键盘输入区分为可编辑输入模式和不可编辑输入模式，当所述键盘为可编辑输入模式时，输入的文本内容为可编辑文本内容，当所述键盘为不可编辑输入模式时，输入的文本内容为不可编辑文本内容。

在一个可选的实施例中，采用以下之一的方式实现在所述文本输入框中添加所述不可编辑文本内容：

将所述不可编辑文本内容追加到所述文本输入框的末尾；

将所述不可编辑文本内容添加到所述文本输入框的光标位置处。

在一个可选的实施例中，根据预先设置的回调函数从所述输入文本框中接收所述不可编辑内容，并将所述不可编辑文本内容解析为相应内容。

根据本发明的第二方面，提供一种文本输入的控制系统，包括：

获取模块，用于获取向web页面上的文本输入框中提供的不可编辑文本内容，所述web页面上的文本输入框采用div元素实现；

创建模块，用于根据所述不可编辑文本内容创建Image对象；

添加模块，用于基于所述Image对象和所述div元素在所述文本输入框中添加所述不可编辑文本内容；

解析模块，用于将所述不可编辑文本内容解析为相应内容。

根据本发明的第三方面，提供一种电子设备，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为执行上述任意一项所述的控制方法。

根据本发明的第四方面，提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机指令被执行时实现上述任意一项所述的控制方法。

本发明具有如下效果：采用div元素实现文本输入框，对于输入到文本输入框中的不可编辑文本内容，创建Image对象，利用div元素和image对象的特性将不可编辑文本转换为div元素上的一个图像节点，从而实现文本输入框内的不可编辑文本内容。

附图说明

通过参照以下附图对本发明实施例的描述，本发明的上述以及其它目的、特征和优点将更为清楚，在附图中：

图1是本发明第一实施例提供的文本输入的控制方法的流程图；

图2是基于div元素构建的文本输入框的源代码和显示效果的对比图；

图3是本发明第二实施例提供的文本输入的控制方法的流程图；

图4为基于第二实施例构建的文本输入框的交互示意图；

图5是本发明第三实施例提供的文本输入的控制方法的流程图；

图6是本发明第四实施例提供的文本输入的控制系统的结构图；

图7是根据本发明实施例提供的文本输入的控制电子设备的结构图。

具体实施方式

以下基于实施例对本发明进行描述，但是本发明并不仅仅限于这些实施例。在下文对本发明的细节描述中，详尽描述了一些特定的细节部分。对本领域技术人员来说没有这些细节部分的描述也可以完全理解本发明。为了避免混淆本发明的实质，公知的方法、过程、流程没有详细叙述。另外附图不一定是按比例绘制的。

附图中的流程图、框图图示了本发明实施例的系统、方法、电子设备的可能的体系框架、功能和操作指令，流程图和框图上的方框可以代表一个模块、程序段或仅仅是一段代码，所述模块、程序段和代码都是用来实现规定逻辑功能的可执行指令。也应当注意，所述实现规定逻辑功能的可执行指令可以重新组合，从而生成新的模块和程序段。因此附图的方框以及方框顺序只是用来更好的图示实施例的过程和步骤，而不应以此作为对发明本身的限制。

图1是本发明第一实施例提供的文本输入的控制方法的流程图。该控制方法用于控制提供给文本输入框的文本内容是否为可编辑状态，包括以下步骤。

在步骤S101中，获取向web页面上的文本输入框中提供的文本内容。

根据网页设计原理，用户通过浏览器的地址栏里输入URL地址，浏览器据此加载并解析指定的web页面。在本实施例中，指定的web页面上包括文本输入框，该文本输入框采用div元素实现。对于div元素如何实现文本输入，参见附图2的示例，图上的左半部分为html源代码，右半部分为展示效果。从图上可知，当将div元素的属性contenteditable设置为true时，div元素的文本内容变成可以编辑的文本内容，从而可以基于div元素实现文本输入框，进而前端应用可以经由该文本输入框获取用户输入的文本内容。该文本内容可以包含可编辑文本内容，也可以包含不可编辑文本内容。对于可编辑文本内容，在没有提交之前，用户可以任意修改。而对于不可编辑文本内容，用户只能将其整体上删除，而不能进行局部上的修改。

在步骤S102中，判断文本类型。

在本步骤中，前端应用需要对基于步骤S101获取到的文本内容进行判定，以确定其为可编辑文本内容还是不可编辑文本内容。如果是不可编辑文本内容，执行步骤S103，否则执行步骤S105。

在步骤S103中，根据不可编辑文本内容创建Image对象。

在本步骤中，通过js提供的Image接口可以根据不可编辑文本内容创建Image对象。具体地，一种可选的方式是将不可编辑文本内容转换为特定格式的包含svg的字符串，然后利用该字符串和Image对象的src属性的值去生成Image对象；而另外一种可选的方式是使用canvas去将不可编辑内容画出来，然后转成base64，然后创建Image对象，并将Image的src属性赋值为base64。

在步骤S104中，基于Image对象和div元素在文本输入框中添加不可编辑文本内容。

利用div元素和Image对象的特性，能够实现在文本输入框中添加不可编辑文本内容。在后续的第二实施例和第三实施例中均给出了示例。

在步骤S105中，基于浏览器的默认响应将可编辑文本内容添加到文本输入框中。

在步骤S106中，将不可编辑文本内容解析为相应内容。

前端应用在源代码中设定了对不可编辑文本内容的解析规则，此步骤按照解析规则进行解析即可。具体地，当前端应用收集文本输入框内的文本内容时，根据解析规则将不可编辑文本内容替换成相应内容。例如，不可编辑文本在文本输入框内显示的是‘时间’，当前端应用将其替换为‘$time’。

在本实施例中，将文本内容区分为不可编辑文本内容和可编辑文本内容，对于可编辑文本内容，按照浏览器的默认响应处理成所见即所得的文本内容，而对于不可编辑文本内容，利用div元素和image对象的特性将不可编辑文本转换为div元素上的一个图像节点，从而实现不可编辑文本内容。

图3是本发明第二实施例提供的文本输入的控制方法的流程图。具体包括以下步骤。

在步骤S301中，web页面采用div元素作为文本输入框。

本步骤通过web页面的源代码实现，具体可参见附图2以及前述对于附图2的描述。

在步骤S302中，将不可编辑文本内容转换成第一字符串。

在本实施例中，将不可编辑文本内容按照设定格式转换为同时包含svg标签和所述不可编辑内容的第一字符串。第一字符串例如如下所示的字符串。在该字符串中，“时间”字段对应于上文中所指的所述不可编辑文本内容。而将“时间”字段采用div标签标记则是构建该字符串的优选方式，通过div标签方便对“时间”字段进行样式设置。

“data:image/svg+xml,<svg xmlns＝"http://www.w3.org/2000/svg">

<foreignObject width＝"100％"height＝"100％">

<div xmlns＝"http://www.w3.org/1999/xhtml">

时间

</div>

</foreignObject>

</svg>”

在步骤S303中，创建正本的Image对象。

在本实施例中，当浏览器加载并解析web页面时，调用内嵌在web页面中的JS脚本，根据第一字符串创建一个Image对象作为正本。相关源代码如下所示。

let img＝new Image()

img.setAttribute('crossOrigin','anonymous')

img.src＝${第一字符串}

在步骤S304中，获取向web页面上的文本输入框中提供的文本内容。

在步骤S305中，判断文本类型。如果是可编辑文本内容，则执行步骤S306，如果是不可编辑文本内容，则执行步骤S307。

在步骤S306中，采用浏览器默认响应方式处理可编辑文本内容。

步骤S304-S306和第一实施例里的相应步骤相同，这里就不再赘述。

在步骤S307中，创建副本的Image对象。

在步骤S308中，div调用appendChild(副本的Image对象)将副本的Image对象添加到文本输入框中。

在步骤303中，创建了一个正本的Image对象，在本步骤中，采用正本的Image对象调用克隆接口，以得到一个副本的Image对象，副本的Image对象和正本的Image对象具有相同的属性。相关源代码如下所示。

img_back＝img.cloneNode(true)；

其中，img为正本的Image对象，img_back为副本的Image对象。

在步骤S309中，解析数据。

在步骤S310中，如果是可编辑文本内容，直接记录。

在步骤S311中，如果是不可编辑文本内容，调用回调函数，记录回调函数的结果。

在步骤S309-S311中，对文本输入框内的文本内容进行解析，得到最终的文本内容。

在本实施例中，将不可编辑文本内容转换为第一字符串，第一字符串中包含svg标签，然后利用Image接口所述不可编辑文本内容在文本输入框内正常显示且不可编辑，从而达到在文本输入框输入不可编辑文本内容的目的。

下面结合附图4对第二实施例进行进一步的解释。图4为基于第二实施例构建的文本输入框的交互示意图。参见图4，文本输入框401为基于div元素实现的文本输入框，每个按钮402表示一个不可编辑文本内容。在步骤1时，输入框处于初始状态；在步骤2时，用户键盘输入“严重预警！”(即可编辑文本404)字符，然后点击“人员姓名(类型)”按钮，“人员姓名(类型)”(即不可编辑文本403)会被输入到文本输入框401中，并被标记为带背景色的，且该字符不可以编辑，如果删除，会整体被删除；在步骤3时，用户继续输入其他文本内容；在步骤4时，前端应用获取并解析文本输入框内的文本内容，将上面中不可编辑内容404替换，最终得到解析后的文本内容405。进一步地，文本内容405即字符串”严重预警！${name}于${time}在${site}出现”在运行过程中会被替换为例如“严重预警！台风于2019-05-14 10:00:00在上海出现！”的字符串。

图5是本发明第三实施例提供的文本输入的控制方法的流程图。具体包括以下步骤。

在步骤S501中，web页面采用div元素作为文本输入框。

在步骤S502中，将不可编辑文本内容转换成第一字符串。

在步骤S503中，创建正本的Image对象。

在步骤S504中，获取向web页面上的文本输入框中提供的文本内容。

在步骤S505中，判断文本类型。如果是可编辑文本内容，则执行步骤S506，如果是不可编辑文本内容，则执行步骤S507。

在步骤S506中，采用浏览器默认响应方式处理可编辑文本内容。

在步骤S507中，创建副本的Image对象。

在步骤S508中，获取光标位置，将副本的Image对象添加到Range对象中。

在步骤S509中，解析数据。

在步骤S510中，如果是可编辑文本内容，直接记录。

在步骤S511中，如果是不可编辑文本内容，调用回调函数，记录回调函数的结果。

在本实施例中，步骤S501-S507可以参见步骤S301-S307，S509–S511可以参见步骤S309-S311，只有步骤S508和步骤S308不同，这也是本实施例和第二实施例的区别之处。步骤S508的实现效果是将不可编辑文本内容添加到文本输入框的光标位置。实现将不可编辑内容添加光标位置的代码如下所示。

对于以上实施例中，还应该指出，前端应用均需要区分当前输入到文本输入框中的文本内容是输入可编辑文本内容还是不可编辑文本内容，可编辑文本内容必须是动态文本内容，不可编辑内容则可能是动态文本内容，也可能是静态文本内容，静态文本内容是指源代码指定的文本内容，动态文本内容则由用户实时输入。在图4中将可编辑文本内容限定为键盘输入的字符，将不可编辑文本内容限定为按钮对应的静态文本内容。而对于不可编辑文本内容也是动态文本内容的情况，本发明提供一个可选的实施方式用于区分用户通过键盘输入的可编辑文本内容和不可编辑文本内容。具体地，预先为键盘输入设置两种不同的输入模式，当键盘为可编辑输入模式时，输入的文本内容是可编辑文本内容，当键盘为不可编辑输入模式时，输入的文本内容为不可编辑文本内容。输入模式的切换可以借助于键盘上的特定按键实现。基于该实施方式，本发明可以将动态内容的不可编辑内容添加到文本输入框中。

另外，在一个可选的实施例中，对于web页面中的不可编辑文本内容，可以采用div元素标记，并且定义其样式。相关源代码如下所示。

从以上可知，采用div元素的className结合style可以直接定义样式，例子如下：(下面中'时间'字体的颜色会变成红色)

在另一个可选的实施例中，利用下述代码防止脚本注入，以提高web页面的安全性。

即，将'className'和'不可编辑文本内容'经过转义以后，对其中的<script>标签等关键字符转义后再生成svg字符串。

图6是本发明第四实施例提供的文本输入的控制系统的结构图。具体包括以下模块。

获取模块601用于获取向web页面上的文本输入框中提供的不可编辑文本内容，web页面上的文本输入框采用div元素实现。

创建模块602用于根据不可编辑文本内容创建Image对象。

添加模块603用于基于Image对象和div元素在文本输入框中添加不可编辑文本内容。

解析模块604用于将不可编辑文本内容解析为相应内容。

在本实施例中，对于不可编辑文本内容，利用div元素和image对象的特性将不可编辑文本转换为div元素上的一个图像节点，从而实现不可编辑文本内容。

应该指出，控制系统和控制方法相应的功能对应，因此在控制系统的实施例中对重复内容并没有详细描述。

图7是根据本发明实施例的一种电子设备的结构图。参考图7，电子设备70，包括通过总线连接的至少一个处理器710、存储器720、输入设备730和输出设备740。存储器720包括只读存储器(ROM)和随机访问存储器(RAM)，存储器720内存储有执行系统功能所需的各种计算机指令和数据，处理器710从存储器720中读取各种计算机指令以执行各种适当的动作和处理。输入输出设备包括键盘、鼠标等的输入部分7；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分；包括硬盘等的存储部分；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分。存储器还存储有特定计算机指令，处理器710从存储器720中读取该特定计算机指令，执行该指令以完成以下的操作指令：获取向web页面上的文本输入框中提供的不可编辑文本内容，所述web页面上的文本输入框采用div元素实现；根据所述不可编辑文本内容创建Image对象；基于所述Image对象和所述div元素在所述文本输入框中添加所述不可编辑文本内容；以及将所述不可编辑文本内容解析为相应内容。

相应地，本发明实施例提供一种计算机可读存储介质，该计算机可读存储介质存储有计算机指令，所述计算机指令被执行时实现上述数据处理方法所规定的操作指令。

附图中的流程图、框图图示了本发明实施例的系统、方法、电子设备的可能的体系框架、功能和操作指令，流程图和框图上的方框可以代表一个模块、程序段或仅仅是一段代码，所述模块、程序段和代码都是用来实现规定逻辑功能的可执行指令。也应当注意，所述实现规定逻辑功能的可执行指令可以重新组合，从而生成新的模块和程序段。因此附图的方框以及方框顺序只是用来更好的图示实施例的过程和步骤，而不应以此作为对发明本身的限制。

系统的各个模块或单元可以通过硬件、固件或软件实现。软件例如包括采用JAVA、C/C++/C#、SQL等各种编程语言形成的编码程序。虽然在方法以及方法图例中给出本发明实施例的步骤以及步骤的顺序，但是所述步骤实现规定的逻辑功能的可执行指令可以重新组合，从而生成新的步骤。所述步骤的顺序也不应该仅仅局限于所述方法以及方法图例中的步骤顺序，可以根据功能的需要随时进行调整。例如将其中的某些步骤并行或按照相反顺序执行。

以上所述仅为本发明的优选实施例，并不用于限制本发明，对于本领域技术人员而言，本发明可以有各种改动和变化。凡在本发明的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种文本输入的控制方法，其特征在于，包括以下步骤：

采用div元素实现web页面上的文本输入框；

获取向所述web页面上的文本输入框中提供的不可编辑文本内容；

将所述不可编辑文本内容转换为第一字符串，所述第一字符串中包含svg标签和所述不可编辑文本内容；

根据所述第一字符串创建作为正本的Image对象；

克隆所述正本的Image对象，以得到作为副本的Image对象；

利用所述div元素和所述副本的Image对象将所述不可编辑文本内容转换为所述div元素上的一个图像节点，以在所述文本输入框中添加所述不可编辑文本内容；

在通过所述文本输入框获取用户输入的文本内容时，将所述不可编辑文本内容解析为相应内容。

2.根据权利要求1所述的控制方法，其特征在于，所述控制方法还包括：对所述不可编辑文本内容进行样式设定，以便在在所述文本输入框中显示所述不可编辑文本内容具有相应样式。

3.根据权利要求1所述的控制方法，其特征在于，还包括：

获取向所述web页面上的文本输入框中提供的可编辑文本内容；以及

基于浏览器的默认响应将所述可编辑文本内容添加到所述文本输入框中。

4.根据权利要求1所述的控制方法，其特征在于，经由按钮向所述web页面上的文本输入框中提供所述不可编辑文本内容，通过键盘向所述web页面上的文本输入框中提供所述可编辑文本内容。

5.根据权利要求4所述的控制方法，其特征在于，将键盘输入区分为可编辑输入模式和不可编辑输入模式，当所述键盘为可编辑输入模式时，输入的文本内容为可编辑文本内容，当所述键盘为不可编辑输入模式时，输入的文本内容为不可编辑文本内容。

6.根据权利要求1所述的控制方法，其特征在于，在所述文本输入框中添加所述不可编辑文本内容包括以下之一：

将所述不可编辑文本内容追加到所述文本输入框的末尾；

将所述不可编辑文本内容添加到所述文本输入框的光标位置处。

7.根据权利要求1所述的控制方法，其特征在于，根据预先设置的回调函数从所述输入文本框中接收所述不可编辑文本内容，并将所述不可编辑文本内容解析为相应内容。

8.一种文本输入的控制系统，其特征在于，包括：

获取模块，用于获取向web页面上的文本输入框中提供的不可编辑文本内容，所述web页面上的文本输入框采用div元素实现；

创建模块，用于将所述不可编辑文本内容转换为第一字符串，所述第一字符串中包含svg标签和所述不可编辑文本内容,根据所述第一字符串创建作为正本的Image对象,以及克隆所述正本的Image对象，以得到作为副本的Image对象；

添加模块，用于利用所述div元素和所述副本的Image对象将所述不可编辑文本内容转换为所述div元素上的一个图像节点，以在所述文本输入框中添加所述不可编辑文本内容；

解析模块，用于在通过所述文本输入框获取用户输入的文本内容时，将所述不可编辑文本内容解析为相应内容。

9.一种电子设备，其特征在于，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为执行上述权利要求1至7任意一项所述的控制方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令被执行时实现如权利要求1至7任意一项所述的控制方法。