CN102981853A - 一种通过网页的文本输入框提交长文本的方法和装置 - Google Patents

Abstract

本发明公开了一种通过网页的文本输入框提交长文本的方法，包括在网页的文本输入框加载完成后，生成覆盖所述文本输入框上的DIV层；检测到向所述文本输入框输入文本的事件；在文本输入框上的所述DIV层中生成所述文本的HTML元素；判断输入的文本为长文本；检测到文本输入框的提交事件时将所述文本的HTML元素转换为图片文件，并将所述图片文件上传至服务器侧。所述服务器为微博服务器，通过上述DIV层，实现了超过预定字数的长文本微博的直接提交，极大简化了用户发布长文字微博的繁琐操作，改善了用户体验。本发明还公开了一种提交长文本的装置。

Description

一种通过网页的文本输入框提交长文本的方法和装置

技术领域

本发明涉及互联网浏览器领域，更具体地，涉及一种通过网页的文本输入框提交长文本的方法和装置。

背景技术

微博，即微型博客(MicroBlog)，是一个基于用户关系的信息分享、传播以及获取平台，用户通过WEB、WAP以及各种客户端组建个人社区，以特定数量的文字更新信息，并实现即时分享。最早的、也是最著名的微博是美国的twitter，根据相关公开的数据，截至2012年7月份，该产品在全球已经拥有5亿注册用户。2009年8月份中国最大的门户网站新浪网推出“新浪微博”内测版，成为门户网站中第一家提供微博服务的网站，微博正式进入中文上网主流人群视野。

现有技术中，微博使用一个textarea控件作为输入框，向该控件中进行输入文字，然后将输入的文字提交微博服务器。在微博的发展历史中，逐渐形成了对每条微博所含文字数量的限制，例如twitter限制每条微博不多于140个英文字符，新浪微博限制每条微博不多于140个中文字符。对于输入的文字数量大于140时会提示上传失败，不能提交。因此，对于140字以上的长文字的输入，一般需要使用长文字转换工具，先生成包含所述长文字的图片，再以图片文件的格式向微博提交。

可见，对于用户所发微博为超过例如140字的长文字微博时，必须另外进行长文字转换，为用户带来了额外的操作步骤，极大降低了用户体验。用户希望采用更简单、更有效率的方式来实现长文字微博的提交。

发明内容

本发明提供一种通过网页的文本输入框提交长文本的方法和装置，实现了长文本微博的直接、快速的提交，极大提高了用户的操作效率，从而改善了用户体验。

本发明所述通过网页的文本输入框提交长文本的方法包括：

-在网页的文本输入框加载完成后，生成覆盖所述文本输入框上的DIV层；

-检测到向所述文本输入框输入文本的事件；

-在文本输入框上的所述DIV层中生成所述文本的HTML元素；

-判断输入的文本为长文本；

-检测到文本输入框的提交事件；

-将所述文本的HTML元素转换为图片文件；并

-将所述图片文件上传至服务器侧。

可选地，生成DIV层的步骤包括：在网页的所述文本输入框加载完成事件触发后，调用由网页浏览器提供的文本输入框对象的定制处理模块生成覆盖所述文本输入框上的DIV层。其中，所述文本输入框由DOM对象提供，响应于该DOM对象加载完成时触发的ContentReady事件，生成所述DIV层；或响应于整个HTML网页加载完成时触发的DocumentReady事件，生成所述DIV层。

可选地，检测到输入文本的事件的步骤包括：检测到拖曳文本到所述DIV层上时的ondragenter事件和ondragover事件；或检测到复制文本到所述DIV层上时的onCopyHTML事件；或检测到复制系统剪贴板文本到所述DIV层上时的onpaste事件。

可选地，生成文本的HTML元素的步骤包括：调用浏览器侧的HTML元素转换模块，将所述文本转换为HTML元素，并插入到所述DIV层；转换图片文件的步骤包括：调用浏览器侧的文本图片转换模块，将所述DIV层中所述HTML元素转换为图片文件。

可选地，所述上传图片的步骤包括：将所述图片直接上传至服务器侧；或将所述图片上传至图床服务器，从所述图床服务器获取图片的URL地址，并将所获取的URL地址上传至服务器侧。

可选地，当输入文本输入框中的文本字数超过预定字数时，例如140字，判断所述输入的文本为长文本。

可选地，在转换图片文件的步骤之前还可以包括：提示用户输入文本框的字数超过预定字数，将自动进行图片转换操作。

可选地，所述提交事件是所述文本输入框的控件失去焦点，或所述文本输入框的提交按钮被点击。

进一步地，本发明还提供了一种通过网页的文本输入框提交长文本的装置，包括：

-层生成单元，适于在网页的文本输入框加载完成后，生成覆盖所述文本输入框上的DIV层；

-输入检测单元，适于检测到向所述文本输入框输入文本的事件；

-HTML元素生成单元，适于在文本输入框上的所述DIV层中生成所述文本的HTML元素；

-判断单元，适于判断输入的文本为长文本；

-提交检测单元，适于检测到文本输入框的提交事件；

-图片转换单元，适于将所述文本的HTM L元素转换为图片文件；并

-上传单元，适于将所述图片文件上传至服务器侧。

可选地，层生成单元适于：在网页的所述文本输入框加载完成事件触发后，调用由网页浏览器提供的文本输入框对象的定制处理模块生成覆盖所述文本输入框上的DIV层。其中，所述文本输入框由DOM对象提供，则所述层生成单元适于响应于该DOM对象加载完成时触发的ContentReady事件，生成所述DIV层；或响应于整个HTML网页加载完成时触发的DocumentReady事件，生成所述DIV层。

可选地，输入检测单元适于：检测到拖曳文本到所述DIV层上时的ondragenter事件和ondragover事件；或检测到复制文本到所述DIV层上时的onCopyHTML事件；或检测到复制系统剪贴板文本到所述DIV层上时的onpaste事件。

可选地，HTML元素生成单元适于：调用浏览器侧的HTML元素转换模块，将所述文本转换为HTML元素，并插入到所述DIV层；图片转换单元适于：调用浏览器侧的文本图片转换模块，将所述DIV层中所述HTML元素转换为图片文件。

可选地，上传单元适于：将所述图片直接上传至服务器侧；或将所述图片上传至图床服务器，从所述图床服务器获取图片的URL地址，并将所获取的URL地址上传至服务器侧。

根据本发明提供的通过网页的文本输入框提交长文本的方法和装置，所述服务器为微博服务器，通过上述覆盖在所述文本输入框上的DIV层，实现了超过预定字数的长文本微博的输入和提交，并且支持了文字的键入、复制和拖拽，极大简化了用户发布长文字微博的繁琐操作，改善了用户体验。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式，并配合附图，详细说明如下。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出具体实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1为根据本发明一个实施例的提交长文本方法的流程图；

图2为根据本发明一个实施例的提交长文本装置的示意图。

具体实施方式

本发明提供了一种通过网页的文本输入框提交长文本方法和装置，下面将结合附图详细说明如下。

图1示出了根据本发明一个实施例的提交长文本的方法。根据图1所示的实施例，所述服务器为微博服务器，所示方法为通过网页的文本输入框向微博服务器提交并发布长文本微博。

步骤101为DIV层生成步骤，用于在网页的文本输入框加载完成后，生成覆盖所述文本输入框上的DIV层。通常，网页的文本输入框可以由DOM对象提供。DOM对象在网页浏览器中加载完成后，会有相应的加载完成事件被触发，如ContentReady事件。在该加载完成事件触发后，则可以调用由网页浏览器提供的定制处理函数来生成DIV层，该定制处理函数可以是在网页浏览器处预先编制好。可替换地，也可以是在包括该文本输入框的整个HTML网页都加载完成后再生成所需的DIV层，此时该生成操作可以由整个网页的加载完成事件如DocumentReady的触发来调用定制处理函数来实现。定制处理函数生成一个附加的DIV层叠加在该文本输入框之上作为悬浮层。这样，用户向该文本输入框的文本输入操作和输入的文本则由该DIV层先接收，而从用户的角度来看，则感觉依然是输入到了原有的文本输入框中。

步骤102为输入事件检测步骤，用于检测到向所述文本输入框输入文本的事件。如前所述，用户在通过网页浏览器向网页的文本输入框输入文本时，该文本输入事件实际上是发生在步骤101中生成的DIV上。在实际操作中，用户可以通过拖拽、复制或者键盘输入等操作进行文本输入，这些操作会产生对应的文本输入事件。

需要注意的是，当网页浏览器采用IE内核时，IE默认情况下禁止通过拖拽或拷贝的方式向DIV层输入或写入文本。因此，在步骤101中生成该DIV层时，需要使得该DIV屏蔽系统的默认处理，以允许向该DIV层输入文本。

根据本发明的一个实施例，所述输入文本的事件包括：在网页中的文本被拖曳到DIV层中时，DIV层的ondragenter事件和ondragover事件被触发；当网页中的文本被复制时，onCopyHTML事件被触发；或者，在操作系统中的文本通过CTRL+C被复制并通过CTRL+V被粘贴时，onpaste事件被触发。

步骤103为HTML元素生成步骤，用于在文本输入框上的所述DIV层中生成所述文本的HTML元素。具体地，步骤103调用浏览器侧的HTML元素转换模块，用相应的HTML标签标记所述文本的内容，以将其转换为所述文本对应的HTML元素。

在文本对应的HTML元素中，还可以用size、style等属性来对诸如字体大小、显示方式等进行配置。因此，本发明可以支持有格式的文本作为待输入数据。

步骤104为长文本判断步骤，当输入文本输入框中的文本字数超过预定字数时，例如140中文字，判断所述输入的文本为长文本。当然，所述预定字数也可以是其它约定的字数，例如网易微博的长文本预定字数就为163中文字。

步骤105为提交事件检测步骤，所述提交事件是所述文本输入框的控件失去焦点，或所述文本输入框的提交按钮被点击。

步骤106，即图片转换步骤，调用浏览器侧的文本图片转换模块，将所述DIV层中所述HTML元素转换为图片文件，所述图片文件可以是GIF格式，或者是PNG格式等等。可选地，在进行步骤106之前还可以提示用户输入文本框的字数超过预定字数，将自动进行图片转换操作，以提高用户体验。

步骤107为图片上传步骤，用于将步骤106生成的图片文件上传至微博服务器。根据本发明的一个实施例，所述图片可以直接上传至微博服务器；可替换地，根据本发明的另一实施例，所述图片还可以上传至图床服务器，从所述图床服务器获取图片的URL地址，并将所获取的URL地址上传至微博服务器。比较上传图片至微博服务器和上传图片的URL地址至微博服务器，后者上传速度更快，一旦图片的URL地址上传至微博服务器，即向用户显示微博发布成功，缩短了用户发布微博的等待时间，改善了用户体验。

当然，如果步骤104的判断结果为非长文本，例如输入文本少于140字，则在后续检测到提交事件时直接向微博服务器上传所述文本。

本领域技术人员应当明了，图1所示实施例并不严格限制各步骤之间的顺序，除了根据图1文字部分清楚示出对步骤顺序的限制之外，部分步骤之间的顺序是可以根据实际情况进行调整的。

图2示出了根据本发明一个实施例的提交长文本的装置。根据图2所示的实施例，所述服务器为微博服务器，所示装置用于通过网页的文本输入框向微博服务器提交并发布长文本微博，包括如下部件：

层生成单元201，适于在网页的文本输入框加载完成后，生成覆盖所述文本输入框上的DIV层；具体地，在网页的所述文本输入框加载完成事件触发后，调用由网页浏览器提供的文本输入框对象的定制处理模块生成覆盖所述文本输入框上的DIV层。其中，所述文本输入框由DOM对象提供，则所述层生成单元适于响应于该DOM对象加载完成时触发的ContentReady事件，生成所述DIV层；或响应于整个HTML网页加载完成时触发的DocumentReady事件，生成所述DIV层。

输入检测单元202，适于检测到向所述文本输入框输入文本的事件；所述文本输入事件包括：检测到拖曳文本到所述DIV层上时的ondragenter事件和ondragover事件；或检测到复制文本到所述DIV层上时的onCopyHTML事件；或检测到复制系统剪贴板文本到所述DIV层上时的onpaste事件。

HTML元素生成单元203，适于在文本输入框上的所述DIV层中生成所述文本的HTML元素；具体地，调用浏览器侧的HTML元素转换模块，将所述文本转换为HTML元素，并插入到所述DIV层。

判断单元204，适于判断输入的文本为长文本；具体地，当输入文本输入框中的文本字数超过预定字数时，例如140中文字，判断所述输入的文本为长文本。

提交检测单元205，适于检测到文本输入框的提交事件；所述提交事件是所述文本输入框的控件失去焦点，或所述文本输入框的提交按钮被点击。

图片转换单元206，适于将所述文本的HTML元素转换为图片文件；具体地，调用浏览器侧的文本图片转换模块，将所述DIV层中所述HTML元素转换为图片文件，例如GIF格式或GNP格式的图片文件。

上传单元207，适于将所述图片文件上传至服务器侧；具体地，可以将所述图片直接上传至服务器侧；或将所述图片上传至图床服务器，从所述图床服务器获取图片的URL地址，并将所获取的URL地址上传至服务器侧。

根据本发明实施例提供的通过网页的文本输入框提交长文本的方法和装置，通过上述覆盖在所述文本输入框上的DIV层，实现了超过预定字数的长文本微博的输入和提交，并且支持了文字的键入、复制和拖拽，极大简化了用户发布长文字微博的繁琐操作，改善了用户体验。

本发明提供的方法不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (20)

1.一种通过网页的文本输入框提交长文本的方法，包括：

在网页的文本输入框加载完成后，生成覆盖所述文本输入框上的DIV层；

检测到向所述文本输入框输入文本的事件；

在文本输入框上的所述DIV层中生成所述文本的HTML元素；

判断输入的文本为长文本；

检测到文本输入框的提交事件；

将所述文本的HTML元素转换为图片文件；并

将所述图片文件上传至服务器侧。

2.根据权利要求1所述的方法，其特征在于，生成DIV层的步骤包括：

在网页的所述文本输入框加载完成事件触发后，调用由网页浏览器提供的文本输入框对象的定制处理模块生成覆盖所述文本输入框上的DIV层。

3.根据权利要求2所述的方法，其特征在于，检测到输入文本的事件的步骤包括：

检测到拖曳文本到所述DIV层上时的ondragenter事件和ondragover事件；或

检测到复制文本到所述DIV层上时的onCopyHTML事件；或

检测到复制系统剪贴板文本到所述DIV层上时的onpaste事件。

4.根据权利要求1所述的方法，其特征在于，生成文本的HTML元素的步骤包括：

调用浏览器侧的HTML元素转换模块，将所述文本转换为HTML元素，并插入到所述DIV层。

5.根据权利要求1所述的方法，其特征在于，转换图片文件的步骤包括：

调用浏览器侧的文本图片转换模块，将所述DIV层中所述HTML元素转换为图片文件。

6.根据权利要求1所述的方法，其特征在于，所述上传图片的步骤包括：

将所述图片直接上传至服务器侧；或

将所述图片上传至图床服务器，从所述图床服务器获取图片的URL地址，并将所获取的URL地址上传至服务器侧。

7.如权利要求1-6中任一权利要求所述的方法，其特征在于，所述服务器为微博服务器，其中判断长文本的步骤包括：

当所述文本的字数超过预定字数，判断所述输入的文本为长文本。

8.如权利要求7所述的方法，其特征在于，在转换图片文件的步骤之前还包括：

提示用户输入文本框的字数超过预定字数，将自动进行图片转换操作。

9.根据权利要求1所述的方法，其特征在于，其中所述提交事件是所述文本输入框的控件失去焦点，或所述文本输入框的提交按钮被点击。

10.根据权利要求1或2所述的方法，其特征在于，所述文本输入框由DOM对象提供，

响应于该DOM对象加载完成时触发的ContentReady事件，生成所述DIV层；或

响应于整个HTML网页加载完成时触发的DocumentReady事件，生成所述DIV层。

11.一种通过网页的文本输入框提交长文本的装置，包括：

层生成单元，适于在网页的文本输入框加载完成后，生成覆盖所述文本输入框上的DIV层；

输入检测单元，适于检测到向所述文本输入框输入文本的事件；

HTM L元素生成单元，适于在文本输入框上的所述DIV层中生成所述文本的HTML元素；

判断单元，适于判断输入的文本为长文本；

提交检测单元，适于检测到文本输入框的提交事件；

图片转换单元，适于将所述文本的HTML元素转换为图片文件；并

上传单元，适于将所述图片文件上传至服务器侧。

12.根据权利要求11所述的装置，其特征在于，层生成单元适于：

在网页的所述文本输入框加载完成事件触发后，调用由网页浏览器提供的文本输入框对象的定制处理模块生成覆盖所述文本输入框上的DIV层。

13.根据权利要求12所述的装置，其特征在于，输入检测单元适于：

检测到拖曳文本到所述DIV层上时的ondragenter事件和ondragover事件；或

检测到复制文本到所述DIV层上时的onCopyHTML事件；或

检测到复制系统剪贴板文本到所述DIV层上时的onpaste事件。

14.根据权利要求11所述的装置，其特征在于，HTML元素生成单元适于：

调用浏览器侧的HTM L元素转换模块，将所述文本转换为HTML元素，并插入到所述DIV层。

15.根据权利要求11所述的装置，其特征在于，图片转换单元适于：

调用浏览器侧的文本图片转换模块，将所述DIV层中所述HTML元素转换为图片文件。

16.根据权利要求11所述的装置，其特征在于，上传单元适于：

将所述图片直接上传至服务器侧；或

将所述图片上传至图床服务器，从所述图床服务器获取图片的URL地址，并将所获取的URL地址上传至服务器侧。

17.如权利要求11-16中任一权利要求所述的装置，其特征在于，所述服务器为微博服务器，其中判断单元适于：

当所述文本的字数超过预定字数，判断所述输入的文本为长文本。

18.如权利要求17所述的装置，其特征在于，图片转换单元还适于：

提示用户输入文本框的字数超过预定字数，将自动进行图片转换操作。

19.根据权利要求11所述的装置，其特征在于，其中所述提交事件是所述文本输入框的控件失去焦点，或所述文本输入框的提交按钮被点击。

20.根据权利要求11或12所述的装置，其特征在于，所述文本输入框由DOM对象提供，所述层生成单元适于

响应于该DOM对象加载完成时触发的ContentReady事件，生成所述DIV层；或

响应于整个HTML网页加载完成时触发的DocumentReady事件，生成所述DIV层。

Images