一种扩展的数据输入装置及方法
【专利摘要】本发明公开了一种扩展的数据输入装置和方法，用于通过网页浏览器将用户输入的数据加载到网页的输入区域中。在本发明中，在网页的输入区域加载完成后，生成覆盖于输入区域上的悬浮层；在检测到位于悬浮层的数据输入事件后，获取用户的待输入数据；根据待输入数据的数据类型，将其据转换成对应的HTML元素，其中包含待输入数据的内容；将得到的HTML元素加载到悬浮层中，并显示待输入数据的内容。本发明可以支持将拖拽、拷贝或键盘操作所要输入对象，如文本、图片、数据文件和网页元素，转换为HTML格式的数据后加载到在输入区域上叠加的悬浮层中，这扩展了用户的输入的手段和数据类型，极大地提高了用户的输入效率，并极大地改善了用户体验。
【专利说明】一种扩展的数据输入装置及方法
【技术领域】
[0001]本发明涉及计算机【技术领域】，更具体地，涉及一种扩展的数据输入装置及方法，用于通过网页浏览器将用户输入的数据加载到网页的输入区域中。
【背景技术】
[0002]用户在通过网页浏览器与web服务器进行交互时，例如通过浏览器上传或发布数据或者说信息时，可以在网页的指定输入区域中输入数据内容，并提交给服务器。
[0003]在现有的网页中，通常提供输入控件来接收用户的输入数据并提交给服务器。例如，对于纯文本数据，可以文本区域控件中进行输入；对于图片或者文件数据，则可以通过使用文件上传控件来选择所需的文件进行上传，并可以在上传后使用从服务器返回的Url地址进行预览/显示，这需要用户进行一系列烦琐的操作后才能实现。
[0004]随着用户对浏览器使用体验要求的提高，以及对操作效率要求的提高，现有的输入方式，尤其是对图片或文件的输入，显然是不能令人满意的。用户更希望采用更简单的方式，例如通过拖拽或拷贝的方式，来上传或发布各种数据，如文本、图片、文件或网页元素坐寸ο
[0005]但是，对于现有的网页浏览器，如IE，在默认情况下并不接受用户将图片或文件直接拖拽或拷贝到输入区域中。
【发明内容】
[0006]本发明的目的在于克服现有技术中的至少一个缺陷。
[0007]按照本发明的一个方面，提供了一种扩展的数据输入装置，其配置成通过网页浏览器将用户输入的数据加载到网页的输入区域中，包括:
[0008]层生成单元，其配置成在网页的所述输入区域加载完成后，生成覆盖于所述输入区域上的悬浮层；
[0009]数据获取单元，其配置成在检测到位于所述悬浮层的数据输入事件后，获取用户的待输入数据；
[0010]数据转换单元，其配置成根据所述待输入数据的数据类型，将所述待输入数据转换成对应的HTML元素，所述HTML元素中包含所述待输入数据的内容；
[0011]数据加载单元，其配置成将转换得到的所述HTML元素加载到所述悬浮层中，并显示所述待输入数据的内容。
[0012]在一个实施例中，所述输入区域由网页控件或DOM对象提供，所述层生成单元配置成响应于所述网页控件或DOM对象的加载完成事件而运行。
[0013]在一个实施例中，所述数据输入事件包括用户向所述输入区域的拖拽或拷贝操作，所述数据获取单元配置成从计算机系统的剪贴薄访问所述待输入数据。
[0014]在一个实施例中，所述数据输入事件包括用户向所述输入区域的键盘输入操作，所述数据获取单元配置成截取用户的键盘输入信息作为所述待输入数据。
[0015]在一个实施例中，所述待输入数据的输入类型包括文本、图片、文件和/或网页元素。
[0016]在一个实施例中，所述数据转换单元配置成响应于所述数据输入事件的开始而运行；并且，所述数据加载单元配置成响应于所述数据输入事件的结束而运行。
[0017]在一个实施例中，所述待输入数据为文本，其中:
[0018]所述数据转换单元配置成用对应的HTML标签标记所述文本的内容，以将其转换为对应的HTML元素；
[0019]所述数据加载单元配置成将所述HTML元素写入到所述悬浮层中，并显示所述文本的内容。
[0020]在一个实施例中，所述待输入数据为图片，其中:
[0021]所述数据转换单元配置成将所述图片上传到服务器，并从服务器获取所述图片的远程地址；并且，所述第二定制处理函数用对应的HTML标签标记所述图片的远程地址，以将其转换为对应的HTML元素；
[0022]所述数据加载单元配置成将所述HTML元素写入到所述悬浮层中，并显示所述图片的内容。
[0023]在一个实施例中，所述待输入数据为文件，其中:
[0024]所述数据转换单元配置成调用第三方接口函数将所述文件转换为对应的HTML元素；
[0025]所述数据加载单元配置成将所述HTML元素写入到所述悬浮层中，并显示所述文件的内容。
[0026]在一个实施例中，所述待输入数据为文件，其中:
[0027]所述数据转换单元配置成将所述文件上传到服务器，并从服务器获取所述文件的远程地址；并且，所述数据转换单元配置成用对应的HTML标签标记所述文件的远程地址，以将其转换为对应的HTML元素；
[0028]所述数据加载单元配置成将所述HTML元素写入到所述悬浮层中，并显示所述文件的内容。
[0029]在一个实施例中，所述对应的HTML标签为所述网页浏览器可识别的自定义HTML标签；并且
[0030]所述数据加载单元配置成识别所述自定义HTML标签，调用浏览器插件将所述文件显示在所述悬浮层中，或调用计算机本地程序打开并显示所述文件。
[0031]在一个实施例中，所述待输入数据为网页元素，其中:
[0032]所述数据转换单元配置成将所述网页元素其转换为对应的HTML元素；
[0033]所述数据加载单元配置成将所述HTML元素写入到所述悬浮层中，并显示所述网页元素的内容。
[0034]在一个实施例中，所述转换包括空的转换操作。
[0035]在一个实施例中，所述输入区域为纯文本输入区域。
[0036]按照本发明的另一方面，提供了一种扩展的数据输入方法，用于通过网页浏览器将用户输入的数据加载到网页的输入区域中，该方法包括:
[0037]层生成步骤:在网页的所述输入区域加载完成后，生成覆盖于所述输入区域上的悬浮层;
[0038]数据获取步骤:在检测到位于所述悬浮层的数据输入事件后，获取用户的待输入数据；
[0039]数据转换步骤:根据所述待输入数据的数据类型，将所述待输入数据转换成对应的HTML元素，所述HTML元素中包含所述待输入数据的内容；
[0040]数据加载步骤:将转换得到的所述HTML元素加载到所述悬浮层中，并显示所述待输入数据的内容。
[0041]在一个实施例中，所述输入区域由网页控件或DOM对象提供，在所述层生成步骤中，由所述网页控件或DOM对象的加载完成事件触发调用由网页浏览器提供的第一定制处理函数来生成所述悬浮层。
[0042]在一个实施例中，所述数据输入事件包括用户向所述输入区域的拖拽或拷贝操作；并且，在所述数据获取步骤中，包括从计算机系统的剪贴薄访问所述待输入数据。
[0043]在一个实施例中，所述数据输入事件包括用户向所述输入区域的键盘输入操作；并且，在所述数据获取步骤中，包括截取用户的键盘输入信息作为所述待输入数据。
[0044]在一个实施例中，所述待输入数据的输入类型包括文本、图片、文件和/或网页元素。
[0045]在一个实施例中，由所述数据输入事件的开始而触发调用由网页浏览器提供的第二定制处理函数来执行所述数据转换步骤；并且，由所述数据输入事件的结束而触发调用由网页浏览器提供的第三定制处理函数来执行所述数据加载步骤。
[0046]在一个实施例中,所述待输入数据为文本,其中:
[0047]所述第二定制处理函数用对应的HTML标签标记所述文本的内容，以将其转换为对应的HTML元素；
[0048]所述第三定制处理函数将所述HTML元素写入到所述悬浮层中，并显示所述文本的内容。
[0049]在一个实施例中，所述待输入数据为图片，其中:
[0050]所述第二定制处理函数将所述图片上传到服务器，并从服务器获取所述图片的远程地址；并且，所述第二定制处理函数用对应的HTML标签标记所述图片的远程地址，以将其转换为对应的HTML元素；
[0051]所述第三定制处理函数将所述HTML元素写入到所述悬浮层中，并显示所述图片的内容。
[0052]在一个实施例中，所述待输入数据为文件，其中:
[0053]所述第二定制处理函数调用第三方接口函数将所述文件转换为对应的HTML元素；
[0054]所述第三定制处理函数将所述HTML元素写入到所述悬浮层中，并显示所述文件的内容。
[0055]在一个实施例中，所述待输入数据为文件，其中:
[0056]所述第二定制处理函数将所述文件上传到服务器，并从服务器获取所述文件的远程地址；并且，所述第二定制处理函数用对应的HTML标签标记所述文件的远程地址，以将其转换为对应的HTML元素；
[0057]所述第三定制处理函数将所述HTML元素写入到所述悬浮层中，并显示所述文件的内容。
[0058]在一个实施例中，所述对应的HTML标签为所述网页浏览器可识别的自定义HTML标签；并且
[0059]所述第三定制处理函数识别所述自定义HTML标签，调用浏览器插件将所述文件显示在所述悬浮层中，或调用计算机本地程序打开并显示所述文件。
[0060]在一个实施例中，所述待输入数据为网页元素，其中:
[0061]所述第二定制处理函数将所述网页元素其转换为对应的HTML元素；
[0062]所述第三定制处理函数将所述HTML元素写入到所述悬浮层中，并显示所述网页元素的内容。
[0063]在一个实施例中，所述转换包括空的转换操作。
[0064]在一个实施例中，所述输入区域为纯文本输入区域。
[0065]本发明的扩展的数据输入方法和装置可以支持将拖拽、拷贝或键盘操作所要输入对象，如文本、图片、数据文件和网页元素，转换为HTML格式的数据后加载到在输入区域上叠加的悬浮层中，这扩展了用户的输入的手段和数据类型，极大地提高了用户的输入效率，并极大地改善了用户体验。
【专利附图】
【附图说明】
[0066]图1示出了按照本发明的扩展的数据输入方法的一个实施例的流程图；
[0067]图2示出了按照本发明的扩展的数据输入装置的一个实施例的结构示意图。
【具体实施方式】
[0068]下面结合附图和【具体实施方式】对本发明进一步详细描述。
[0069]如图1所示的本发明的扩展的数据输入方法的一个实施例，用于用户通过网页浏览器向网页的输入区域输入数据。
[0070]步骤100是层生成步骤，用于在网页的目标输入区域加载完成后，生成覆盖于该输入区域上的悬浮层101。通常，网页的输入区域可以由网页控件或DOM对象提供。网页控件或DOM对象在网页浏览器中加载完成后，会有相应的加载完成事件被触发，如OnLoad事件或ContentReady事件。在该加载完成事件触发后，则可以调用由网页浏览器提供的第一定制处理函数。该第一定制处理函数可以是在网页浏览器处预先编制好的，用于生成该悬浮层101。在另一个实施例中，也可以是在包括该输入区域的整个HTML网页都加载完成后再生成所需的悬浮层101，此时，该生成操作可以由整个网页的加载完成事件如DocumentReady的触发来调用第一定制处理函数来实现。第一定制处理函数可以生成一个附加的DIV层叠加在该输入区域之上作为悬浮层101。这样，用户向该输入区域的输入操作和输入数据则由该悬浮层101先接收，而从用户的角度来看，则感觉依然是输入到了原有的输入区域中。
[0071]需要注意的是，当网页浏览器采用IE内核时，IE默认情况下禁止通过拖拽或拷贝的方式向DIV层输入或写入内容。因此，在步骤100中生成该悬浮层101时，需要使得该悬浮层101屏蔽系统的默认处理，以允许向该悬浮层101输入数据。
[0072]步骤200为数据获取步骤，用于在检测到位于悬浮层101的数据输入事件后，获取用户的待输入数据。如前所述，用户在通过网页浏览器向网页的该输入区域输入数据时，该数据输入事件实际上是发生在步骤100中生成的悬浮层101上。在实际操作中，用户可以通过拖拽201、拷贝202或者键盘输入203等操作进行数据输入，这些操作会产生对应的数据输入事件。而用户的输入数据的类型可能是文本210、图片211、文件212或网页元素213，
坐坐寸寸ο
[0073]用户可以对用户本地计算机上的文本210、图片211或文件212、或者网页上的元素213作为待输入数据进行拖拽或拷贝操作，以期将其输入到当前的输入区域中。在用户进行拖拽或拷贝操作时，所操作的对象会被拷贝到计算机系统的剪贴薄中。因此，在步骤200中，可以通过访问计算机系统的剪贴薄来获取用户的待输入数据。
[0074]用户还可以通过计算机的键盘来输入数据，例如文本210。此时，可以通过监听用户的键盘操作来获取用户的输入数据。这例如可以利用IE开发中使用的WebBrowser类来实现，其中的ProcessCmdKey方法会在相应的键按下时做相应的操作，从而可以截取到用户的输入信息，实现对用户输入的键盘信息的获取，从而可以获取到用户输入的文本110作为待输入数据。
[0075]在步骤200中获取到用户的待输入数据后，则执行数据转换步骤300，以便根据待输入数据的数据类型210?213，将其转换成对应的HTML元素，在转换得到的HTML元素中应该包含有所需要的待输入数据的内容。在图1中，以简单的示例表示了各种数据类型210?213转换后的对应的HTML元素的格式310?313。
[0076]最后，在数据加载步骤400中，将转换得到的HTML元素310?313加载或者说写入到悬浮层101中，并显示待输入数据的内容。
[0077]在实际工作过程中，数据转换步骤300可以由数据输入事件的开始而触发调用第二定制处理函数来实现，数据加载步骤400可以由数据输入事件的结束而触发调用第三定制处理函数来实现。该第二定制处理函数和第三定制处理函数可以是在网页浏览器处预先编制好的。例如，当进行拖拽操作输入时，可以由拖拽开始事件ondragstart的触发来调用第二定制处理函数，而由拖拽释放事件ondrop的触发来调用第三定制处理函数；当进行拷贝输入操作时，可以由拷贝事件oncopy的触发来调用第二定制处理函数，而由粘贴事件onpaste的触发来调用第三定制处理函数。其中，表示数据输入的结束的ondrop或onpaste事件对应的第三定制处理函数可以作为<div>标签的事件属性而在生成该悬浮层101时进行定义。
[0078]下面针对不同的数据类型210?213详细说明数据转换步骤300和数据加载步骤400。
[0079]I)当待输入数据是文本210时
[0080]在数据转换步骤300中，可以由第二定制处理函数用对应的HTML标签来标记该文本210的内容。例如，如图1所示,可以用标签〈font〉来标识文本类型的待输入数据a，从而将其转换成对应的HTML元素310。
[0081 ] 在数据加载步骤400中，可以由第三定制处理函数将HTML元素310写入到悬浮层101中，并显示该文本的内容a。
[0082]在其它实施例中，也可以采用其它的HTML元素的格式，例如可以用〈span〉标签来标记文本数据。
[0083]在该HTML元素310中，还可以用size、style等属性来对文本的显示如字体大小、显示方式等进行配置。因此，本发明可以支持有格式的文本作为待输入数据。
[0084]2)当待输入数据是图片211时
[0085]在数据转换步骤300中，可以由第二定制处理函数将图片211上传到服务器(如图床服务器)，并从服务器获取图片211在服务器上的远程地址url。并且，第二定制处理函数用对应的HTML标签标记该图片211的远程地址url。例如，如图1所示，可以用标签<img>来标识该图片211，并用src属性来指向该图片211的远程地址url，从而将其转换成对应的HTML元素311。
[0086]在数据加载步骤400中，可以由第三定制处理函数将该HTML元素311写入到悬浮层101中，并显示该图片211的内容。
[0087]在其它实施例中，也可以采用其它的HTML元素的格式，例如可以用<div>标签来标记该图片211。
[0088]在该HTML元素311中，还可以用style等属性来对图片211显示方式如图片大小、位置等进行配置。
[0089]3)当待输入数据是文件212时
[0090]3.1)当该文件212例如是excel或word等文件时:
[0091]在数据转换步骤300中，可以由第二定制处理函数调用第三方接口函数来将该文件212转换成对应的HTML元素312。
[0092]在数据加载步骤400中，可以由第三定制处理函数将该HTML元素312写入到悬浮层101中，并显示该文件212的内容。
[0093]3.2)当该文件212例如是PPT或PDF等文件时，可以采用类似于前面所述的对于图片211的处理方式:
[0094]在数据转换步骤300中，可以由第二定制处理函数将该文件212上传到服务器(例如文件服务器)，并从服务器获取该文件212在服务器上的远程地址url。并且，第二定制处理函数可以用网页浏览器可识别的自定义HTML标签如<PPT>、<pdf>等标记文件212的该远程地址url，以将其转换为对应的HTML元素312。
[0095]在数据加载步骤400中，可以由第三定制处理函数识别前述的自定义HTML标签，将该HTML元素312写入到悬浮层101中。在显示时，根据该远程地址url从服务器下载对应的文件212，并调用浏览器插件将该文件212的内容显示在悬浮层101中，或调用计算机本地程序打开并显示该文件212。
[0096]4)如果待输入数据是网页元素213时
[0097]由于该网页元素213本身即为HTML格式的元素，因此可以直接使用，而不必进行转换。
[0098]处于处理方法的统一性考虑，在数据转换步骤300中，可以由第二定制处理函数执行一个空的转换操作，使得转换后的HTML元素313与该网页元素213保持一致。在其它实施例中，可以对网页元素213进行转换或修改而获得对应的HTML元素313，以满足实际工作时对网页元素213的显示或布局的要求。
[0099]在数据加载步骤400中，可以由第三定制处理函数将HTML元素313写入到所述悬浮层中，并显示网页元素213或者说HTML元素313的内容。
[0100]前述的输入区域可以为纯文本输入区域，其在默认情况下仅接收用户输入的纯文本。通过本发明的方法，用户可以通过拖拽、拷贝或键盘输入等方式输入格式文本、图片、文件或网页元素等输入数据，极大地提高了用户的输入效率，并极大地改善了用户体验。
[0101]如图2所示的本发明的扩展的数据输入装置的一个实施例，其配置成通过网页浏览器将用户输入的数据加载到网页的输入区域中。该数据输入装置可以包括层生成单元10、数据获取单元20、数据转换单元30和数据加载单元40。
[0102]该层生成单元10可以配置成在网页的输入区域11加载完成后，生成覆盖于输入区域11上的悬浮层101。该输入区域11可以由网页控件或DOM对象提供，在加载完成后会触发一个对应的加载完成事件12，层生成单元10可以响应于该加载完成事件12而运行，以生成悬浮层101。该层生成单元10可以按照前述的本发明的数据输入方法中的第一定制处理函数的处理方式来运行，以生成所需的悬浮层101。
[0103]当用于意图向输入区域11输入数据时，即发生数据输入事件21时，由于悬浮层101是覆盖在输入区域11之上，因此，该数据输入事件21会被悬浮层101接收。该数据获取单元20检测到位于悬浮层101的数据输入事件21后，则按照前述的本发明的数据输入方法中对不同数据输入事件的处理，从剪贴薄22或者用户的键盘输入23中获取用户的待输入数据。
[0104]数据转换单元30根据数据转换单元30所获取的待输入数据的数据类型，将该待输入数据转换成对应的HTML元素，该HTML元素中包含待输入数据的内容。该数据转换单元30可以按照前述的本发明的数据输入方法中的第二定制处理函数的处理方式来运行，根据不同的数据类型，将待输入数据转换成对应的HTML元素。
[0105]数据加载单元40将数据转换单元30转换得到的HTML元素加载到悬浮层101中，并显示待输入数据的内容。该数据加载单元40可以按照前述的本发明的数据输入方法中的第三定制处理函数的处理方式来运行，将所述HTML元素写入到所述悬浮层中，并显示其内容。
[0106]上述本发明实施例中的方法、装置和服务器适用于各种网络或者客户端环境中，例如可以实现在诸如个人计算机设备之类的计算机设备中，或者可以实现在诸如移动电话、移动通信设备、个人数字助理(PDA)等其他便携式电子设备或者非便携式电子设备中。因此本领域技术人员要明确的是，本发明的保护范围并不限于PC上运行浏览器中的数据输入功能，仅是出于描述的简洁和方便而在本发明实施例中采用了 PC上运行浏览器中的数据输入功能进行描述。
[0107]以上实施例仅用于说明本发明的技术方案，并不用于限制本发明的保护范围。在不脱离本发明技术方案的精神和范围的情况下，本领域技术人员可以对本发明的技术方案进行各种修改或者变型。
【权利要求】
1.一种扩展的数据输入装置，其配置成通过网页浏览器将用户输入的数据加载到网页的输入区域中，包括: 层生成单元，其配置成在网页的所述输入区域加载完成后，生成覆盖于所述输入区域上的悬浮层； 数据获取单元，其配置成在检测到位于所述悬浮层的数据输入事件后，获取用户的待输入数据； 数据转换单元，其配置成根据所述待输入数据的数据类型，将所述待输入数据转换成对应的HTML元素，所述HTML元素中包含所述待输入数据的内容； 数据加载单元，其配置成将转换得到的所述HTML元素加载到所述悬浮层中，并显示所述待输入数据的内容。
2.根据权利要求1所述的数据输入装置，其特征在于，所述输入区域由网页控件或DOM对象提供，所述层生成单元配置成响应于所述网页控件或DOM对象的加载完成事件而运行。
3.根据权利要求1或2所述的数据输入装置，其特征在于，所述数据输入事件包括用户向所述输入区域的拖拽或拷贝操作，所述数据获取单元配置成从计算机系统的剪贴薄访问所述待输入数据。
4.根据权利要求1-3中任一项所述的数据输入装置，其特征在于，所述数据输入事件包括用户向所述输入区域的键盘输入操作，所述数据获取单元配置成截取用户的键盘输入信息作为所述待输入数据。
5.根据权利要求1-4中任一项所述的数据输入装置，其特征在于，所述待输入数据的数据类型包括文本、图片、文件和/或网页元素。
6.一种扩展的数据输入方法，用于通过网页浏览器将用户输入的数据加载到网页的输入区域中，其特征在于，该方法包括: 层生成步骤:在网页的所述输入区域加载完成后，生成覆盖于所述输入区域上的悬浮层； 数据获取步骤:在检测到位于所述悬浮层的数据输入事件后，获取用户的待输入数据； 数据转换步骤:根据所述待输入数据的数据类型，将所述待输入数据转换成对应的HTML元素，所述HTML元素中包含所述待输入数据的内容； 数据加载步骤:将转换得到的所述HTML元素加载到所述悬浮层中，并显示所述待输入数据的内容。
7.根据权利要求6所述的数据输入方法，其特征在于，所述输入区域由网页控件或DOM对象提供，在所述层生成步骤中，由所述网页控件或DOM对象的加载完成事件触发调用由网页浏览器提供的第一定制处理函数来生成所述悬浮层。
8.根据权利要求6或7所述的数据输入方法，其特征在于，所述数据输入事件包括用户向所述输入区域的拖拽或拷贝操作；并且，在所述数据获取步骤中，包括从计算机系统的剪贴薄访问所述待输入数据。
9.根据权利要求6-8中任一项所述的数据输入方法，其特征在于，所述数据输入事件包括用户向所述输入区域的键盘输入操作；并且，在所述数据获取步骤中，包括截取用户的键盘输入信息作为所述待输入数据。
10.根据权利要求6-9中任一项所述的数据输入方法，其特征在于，所述待输入数据的数据类型包括文本、图片、文件和/或网页元素。
【文档编号】G06F17/30GK104331215SQ201410542470
【公开日】2015年2月4日 申请日期:2012年6月29日 优先权日:2012年6月29日
【发明者】唐曦, 陈志 , 李鸣, 任寰 申请人:北京奇虎科技有限公司, 奇智软件（北京）有限公司