发明内容
本发明提供一种保存网页的文本输入框中的数据的方法,通过网页的文本输入框,实现了各种数据,例如文本、图片或文件在服务器侧的快速保存,极大提高了用户的操作效率,从而改善了用户体验。
本发明所述的保存网页的文本输入框中的数据的方法包括:-在网页的文本输入框加载完成后,生成覆盖所述文本输入框上的悬浮层;
-检测到向所述文本输入框输入数据的事件,获取所述输入数据;
-根据所述输入数据的数据类型,在所述文本输入框的悬浮层中生成所述数据的HTML元素和/或自定义HTML元素;
-检测到对所述文本输入框的输入数据的提交事件;
-将所述生成的HTML元素和/或自定义HTML元素进行编码,并上传、保存所述编码的HTML元素和/或自定义HTML元素至服务器侧。
其中,所述生成覆盖所述文本输入框上的悬浮层的步骤包括:在网页的所述文本输入框加载完成事件触发后,调用由网页浏览器提供的定制处理函数生成覆盖所述文本输入框上的悬浮层;其中,所述悬浮层包括DI V层。进一步地,所述检测到向所述文本输入框输入数据的事件的步骤包括:检测到所述悬浮层和/或文本输入框的ondragenter和ondragover事件;或检测到所述悬浮层和/或文本输入框的onbeforepaste和onpaste事件。
通过上述覆盖在所述文本输入框上的包括DIV层的悬浮层,实现了包括文本、图片和/或文件的数据的输入,并且支持了文字的键入、复制、拖拽,以及图片或文件的复制、拖拽,极大简化了现有各种数据输入的繁琐操作。
根据本发明所述的方法,不同类型的输入数据,在所述文本输入框的悬浮层中都能生成相对应的HTML元素和/或自定义HTML元素,其中:
在所述输入数据为文本时,所述HTML元素和/或自定义HTML元素生成步骤包括:用相应的HTML标签标记所述文本的内容,以将其转换为所述文本对应的HTML元素。
在所述输入数据为图片时,所述HTML元素和/或自定义HTML元素生成步骤包括:将所述图片上传到图床服务器,并从图床服务器获取所述图片的链接地址;并且,用HTML的IMG标签标记所述图片,以将其转换为所述图片对应的HTML元素,其中所述IMG标签的来源属性为所述图片的链接地址。
在所述输入数据为文件时,所述HTML元素和/或自定义HTML元素生成步骤包括:将所述文件上传到文件服务器,并从文件服务器获取所述文件的链接地址;并且,用自定义HTML标签标记所述文件,以将其转换为所述文件对应的自定义HTML元素,其中所述自定义标签的来源属性为所述文件的链接地址。例如,所述文件包括PDF或PPT文件,则所述自定义HTML元素为自定义的PDF或PPT元素。
可见,针对文本或图片类型的数据,本发明所述方法生成了常规的HTML标准元素,而对于诸如PDF或PPT文件的文件数据,生成了使用自定义HTML标签的自定义HTML元素,其中所述自定义HTML标签是所述网页浏览器能够支持的自定义的<PDF></PDF>或<PPT></PPT>标签。
在检测到输入数据的提交事件时,使用诸如BASE64的编解码对各种数据对应的HTML元素和/或自定义HTML元素进行编码,并以诸如PLAIN文本的方式上传至服务器侧;其中所述提交事件是所述文本输入框的控件失去焦点,或所述文本输入框的提交按钮被点击。
进一步地,本发明还提供一种用于显示上述已保存的文本输入框编码数据的方法,包括:
-从服务器侧下载所述编码的HTML元素和/或自定义HTML元素;
-对所述编码的HTML元素和/或自定义HTML元素进行对应解码;
-显示所述HTML元素对应的数据和/或自定义HTML元素。
其中,所述HTML元素中带有图片数据的链接地址,则所述显示步骤包括:根据所述图片的链接地址,下载并显示所述图片。
其中,所述自定义HTML元素中带有文件数据的链接地址,则所述显示步骤:根据所述文件数据的链接地址,下载所述文件;并调用所述文件的相应浏览器插件或相应浏览器侧应用程序显示所述文件。
另一方面,本发明还提供了一种保存网页的文本输入框中的数据的装置,包括:
-悬浮层生成单元,其配置为在网页的文本输入框加载完成后,生成覆盖所述文本输入框上的悬浮层;
-数据获取单元,其配置为检测到向所述文本输入框输入数据的事件,获取所述输入数据;
-HTML元素和/或自定义HTML元素生成单元,其配置为根据所述输入数据的数据类型,在所述文本输入框的悬浮层中生成所述数据的HTML元素和/或自定义HTML元素;
-提交检测单元,其配置为检测到对所述文本输入框的输入数据的提交事件;
-编码上传单元,其配置为将所述生成的HTML元素和/或自定义HTML元素进行编码,并上传、保存所述编码的HTML元素和/或自定义HTML元素至服务器侧。
进一步地,本发明还提供一种用于显示根据前述方法所保存的文本输入框编码数据的装置,包括:
-下载单元,其配置为从服务器侧下载所述编码的HTML元素和/或自定义HTML元素;
-解码单元,其配置为对所述编码的HTML元素和/或自定义HTML元素进行对应解码;
-显示单元,其配置为显示所述HTML元素对应的数据和/或自定义HTML元素。
根据本发明所述方法,经由网页的文本输入框,实现了文本、图片和/或文件向服务器侧的快速上传、保存,极大简化了用户的操作。其中,对于图片和/或文件,向服务器侧上传的是其包含了在图床/数据服务器上的URL地址的网页元素,只要所述网页元素上传完成,不用等到图片或文件向图床/数据服务器的上传是否完成,即向用户显示上传保存成功,改善了用户体验。
上述说明仅是本发明技术方案的概述,为了能够更清楚了解本发明的技术手段,而可依照说明书的内容予以实施,并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂,以下特举本发明的具体实施方式,并配合附图,详细说明如下。
具体实施方式
本发明提供了一种在网络服务器侧保存和显示网页的文本输入框中的数据的方法,下面将结合附图详细说明如下。
图1示出了本发明所述保存网页的文本输入框中的数据的方法,包括:步骤11,在网页的文本输入框加载完成后,生成覆盖所述文本输入框上的悬浮层;步骤12,检测到向所述文本输入框输入数据的事件,获取所述输入数据;步骤13,根据所述输入数据的数据类型,在所述文本输入框的悬浮层中生成所述数据的HTML元素和/或自定义HTML元素;步骤14,检测到对所述文本输入框的输入数据的提交事件;以及步骤15,将所述生成的HTML元素和/或自定义HTML元素进行编码,并上传、保存所述编码的HTML元素和/或自定义HTML元素至服务器侧。
对于步骤11,在网页的所述文本输入框textarea加载完成事件触发后,调用由网页浏览器提供的定制处理函数生成覆盖所述文本输入框上的悬浮层,所述悬浮层包括一DIV层。其中,所述定制处理函数可以是在网页浏览器处预先编制好的,用于生成该悬浮层。由于DIV层叠加在textarea上,DIV层能够比textarea先行接收交互事件并进行处理,由此实现了在textarea上对诸如文本、图片或文件的多种类型的数据的接收和处理。
对于步骤12,检测文本输入框输入数据的事件包括检测到所述悬浮层和/或文本输入框的ondragenter和ondragover事件,或检测到所述悬浮层和/或文本输入框的onbeforepaste和onpaste事件。
特别地,本地的文件/图片被拖动到包含DIV层的悬浮层时,DIV的ondragenter和ondragover事件被触发。诸如IE的某些浏览器默认情况下禁止向DIV拖拽数据,因此需屏蔽系统的默认处理。当被拖拽的对象在DIV上释放时,DIV的Ondrop事件被触发,将上述生成的HTML转换数据添加写入到已经生成的DIV中。
或者,在本地的文件/图片通过剪贴板复制到包含DIV层的悬浮层时,DIV的onbeforepaste和onpaste事件被触发。诸如IE的某些浏览器默认情况下禁止向DIV复制数据,因此需屏蔽系统的默认处理。当DIV的onpaste事件被触发时,将上述生成的HTML转换数据添加写入到到已经生成的DIV中。
对于步骤13,根据各种不同的数据类型,例如文本,图片或文件,生成所述输入数据对应的HTML元素和/或自定义HTML元素。特别地,对于拖拽或复制的图片或文件,在DIV的ondrop或onpaste事件中,通过external接口,调用客户端程序代码,将对应的文件/图片转换成HTML代码,插入到DIV中。
下面针对不同的数据类型,详细说明步骤13。
1)当入数据是文本时
用相应的HTML标签标记所述文本的内容,以将其转换为所述文本对应的HTML元素。
在文本对应的HTML元素中,还可以用size、style等属性来对诸如字体大小、显示方式等进行配置。因此,本发明可以支持有格式的文本作为待输入数据。
2)当输入数据是图片时
将所述图片上传到图床服务器,并从图床服务器获取所述图片的链接地址;并且,用HTML的IMG标签标记所述图片,以将其转换为所述图片对应的HTML元素,其中所述IMG标签的来源属性为所述图片的链接地址。
例如,用标签<img>来标识该图片,并用src属性来指向该图片的链接地址URL,从而将其转换成对应的HTML元素。
3)当输入数据是文件时
将所述文件上传到文件服务器,并从文件服务器获取所述文件的链接地址;并且,用自定义HTML标签标记所述文件,以将其转换为所述文件对应的自定义HTML元素,其中所述自定义标签的来源属性为所述文件的链接地址。
例如,对于PPT或PDF文件,用网页浏览器可识别的自定义HTML标签如<PPT>、<pdf>等标记所述文件的该链接地址URL,以将其转换为对应的自定义HTML元素。当然,本领域技术人员都了解,所述文件并不限于PPT,PDF类型的文件。
对于步骤14,15,在检测到所述输入数据的提交事件时,将所述生成的各种数据对应的HTML元素和/或自定义HTML元素进行编码,并上传、保存所述编码的元素至服务器侧。
其中,所述提交事件是所述文本输入框的控件失去焦点,或所述文本输入框的提交按钮被点击;编码时,可以使用BASE64编解码对所述HTML元素和/或自定义HTML元素进行编码;然后,被编码的HTML元素和/或自定义HTML元素以PLAIN文本方式上传保存至服务器侧。当然,本领域技术人员也知晓,可以使用其他适合的编解码方法来对元素进行编码,也可以使用其他方式来上传被编码的元素。
图2示出了用于显示根据本发明所保存的文本输入框编码数据的方法,包括:步骤21,从服务器侧下载所述编码的HTML元素和/或自定义HTML元素;步骤22,对所述编码的HTML元素和/或自定义HTML元素进行对应解码;和步骤23,显示所述HTML元素对应的数据和/或自定义HTML元素。
对于步骤21,22,从服务器侧下载的编码HTML元素,使用与上传时所用编码方法对应的解码方法对其进行解码,例如在上传时使用BASE64进行编码,则同样使用BASE64对编码HTML元素进行解码,从而得到所述数据对应的HTML元素和/或自定义HTML元素。
对于文本类型的数据,由于所述HTML元素为常规的HTML标准元素,其中包含了文本内容和属性,网页浏览器可直接显示所述文本内容。
对于图片类型的数据,由于所述HTML元素为常规的HTML标准元素,其中包含了图片在图床服务器的链接地址,网页浏览器直接从所述图床服务器下载所述图片并直接显示图片内容。
对于文件类型的数据,其对应的自定义HTML元素包含了自定义HTML标签,所述自定义HTML标签的来源属性为所述文件的链接地址。网页浏览器可显示所述自定义HTML元素,经由用户点击所述链接地址,以从文件服务器下载所述文件;然后调用所述文件的相应浏览器插件或相应浏览器侧应用程序显示所述文件。
下面将结合图3以发布微博为示例介绍本发明所述方法的应用。
用户可以直接将图片拖拽或复制到微博发布页面的文本输入框内;同时,文字可以是通过计算机键盘键入的,也可以是通过拖拽或复制到文本输入框内的。
当网页浏览器检测到数据输入事件后,在所述文本输入框上的悬浮层中生成了所述文本和图片对应的HTML元素。特别地,所述图片可以被上传到诸如奇虎360公司的图床服务器,获得所述图片在图床服务器上的链接地址,并将所述链接地址设置为所述图片对应的HTML元素所包含的IMG标签的来源属性。当然,除了文字和图片,还可以向此文本输入框中拖拽或复制文件类型的数据,诸如PPT文件或PDF文件,此时在文本输入框的悬浮层中生成对应的自定义HTML元素。
当所述文本输入框失去焦点或用户点击“发布”按钮时,悬浮层中的所述HTML元素被进行BASE64编码,并以PLAIN文本方式上传至微博服务器,并向用户显示发布成功。
使用本发明所述输入数据保存方法,可以在微博发布页面的文本输入框中实现文本、图片和文件的多类型数据输入,极大地简化了用户输入数据的繁琐步骤。并且,当被编码的HTML元素和/或自定义HTML元素被上传到微博服务器时,即向用户显示发布成功,实际上此时大数据量的图片或文件可能还在后台进行上传,但用户不可见。由此,本发明实现了图片、文件等数据在本地的快速发布,并改善了用户体验。
在显示所述上传保存的数据时,即在网页浏览器上显示上述微博内容时,从微博服务器请求下载BASE64编码的HTML元素,然后对其进行BASE 64解码,并显示所述HTML元素对应的数据,其中包括显示文字和从360公司的图床服务器下载图片并显示图片。
图4示出了本发明所述保存网页的文本输入框中的数据的装置的一个实施例,所述装置包括:悬浮层生成单元41,其配置为在网页的文本输入框加载完成后,生成覆盖所述文本输入框上的悬浮层;数据获取单元42,其配置为检测到向所述文本输入框输入数据的事件,获取所述输入数据;HTML元素和/或自定义HTML元素生成单元43,其配置为根据所述输入数据的数据类型,在所述文本输入框的悬浮层中生成所述数据的HTML元素和/或自定义HTML元素;提交检测单元44,其配置为检测到对所述文本输入框的输入数据的提交事件;以及编码上传单元45,其配置为将所述生成的HTML元素和/或自定义HTML元素进行编码,并上传、保存所述编码的HTML元素和/或自定义HTML元素至服务器侧。
进一步地,在所述输入数据为文本时,所述HTML元素和/或自定义HTML元素生成单元包括文本子单元,其配置为:用相应的HTML标签标记所述文本的内容,以将其转换为所述文本对应的HTML元素。
在所述输入数据为图片时,所述HTML元素和/或自定义HTML元素生成单元包括图片子单元,其配置为:将所述图片上传到图床服务器,并从图床服务器获取所述图片的链接地址;并且,用HTML的IMG标签标记所述图片,以将其转换为所述图片对应的HTML元素,其中所述IMG标签的来源属性为所述图片的链接地址。
在所述输入数据为文件时,所述HTML元素和/或自定义HTML元素生成单元包括文件子单元,其配置为:将所述文件上传到文件服务器,并从文件服务器获取所述文件的链接地址;并且,用自定义HTML标签标记所述文件,以将其转换为所述文件对应的自定义HTML元素,其中所述自定义标签的来源属性为所述文件的链接地址。
其中,所述文件包括PDF或PPT文件,则所述自定义HTML元素为自定义的PDF或PPT元素。
图5示出了用于显示根据本发明所保存的文本输入框编码数据的装置的一个实施例,所述装置包括:下载单元51,其配置为从服务器侧下载所述编码的HTML元素和/或自定义HTML元素;解码单元52,其配置为对所述编码的HTML元素和/或自定义HTML元素进行对应解码;显示单元53,其配置为显示所述HTML元素对应的数据和/或自定义HTML元素。
进一步地,所述HTML元素中带有图片数据的链接地址,则所述显示单元配置为:根据所述图片的链接地址,下载并显示所述图片。
所述自定义HTML元素中带有文件数据的链接地址,则所述显示单元配置为:根据所述文件数据的链接地址,下载所述文件;并且调用所述文件的相应浏览器插件或相应浏览器侧应用程序显示所述文件。
上述本发明实施例中的方法、装置和服务器适用于各种网络或者客户端环境中,例如可以实现在诸如个人计算机设备之类的计算机设备中,或者可以实现在诸如移动电话、移动通信设备、个人数字助理(PDA)等其他便携式电子设备或者非便携式电子设备中。因此本领域技术人员要明确的是,本发明的保护范围并不限于PC上运行浏览器中的数据输入功能,仅是出于描述的简洁和方便而在本发明实施例中采用了PC上运行浏览器中的数据输入功能进行描述。
以上实施例仅用于说明本发明的技术方案,并不用于限制本发明的保护范围。在不脱离本发明技术方案的精神和范围的情况下,本领域技术人员可以对本发明的技术方案进行各种修改或者变型。