CN103942202A - 网页文本域高度自适应缩放方法及装置 - Google Patents

Abstract

本发明提出一种网页文本域高度自适应缩放方法及浏览器，其网页文本域高度自适应缩放方法包括以下步骤：使用内核控件打开带有文本域的页面；调用内核控件注入并执行预设的JavaScript脚本；监测导致页面文本域中文本发生变化的用户事件，获取文本域实际的高度和文本行数；根据所述文本域的实际高度和文本行数，将文本域显示的高度设置成滚动高度。本发明通过JavaScript编译的程序实现对网页文本域的监测，并计算出文本域实际的高度和文本行数，从而使浏览器可以根据文本域的实际高度对其显示在页面上的高度作自适应性缩放，根本上消除了网页文本域中输入的信息量受到限制的问题。

Description

网页文本域高度自适应缩放方法及装置

技术领域

本发明涉及移动终端的浏览器技术，特别涉及一种网页文本域高度自适应缩放方法及装置。

背景技术

随着科学技术的迅速发展，通信科技的日新月异，移动通信终端已被人们广泛应用于日常生活和学习中，越来越多的人习惯于使用移动终端进行聊天、上网。

通过手机终端浏览网页时，在页面上经常会有文本域供用户输入文本。但是，目前一些操作系统并不支持对网页文本域的操作。

例如，安装WP7（Windows Phone7，微软公司发布的一款手机操作系统）的手机终端，使用WP7提供的WebBrowser控件（WebBrowser是IE内置的浏览器控件）可以导航网站和渲染显示网页，但是由于WebBrowser控件开放出来的API（Application Programming Interface，应用程序编程接口）接口十分地有限，使用这种控件显示的网页中，没有相关的API接口可以操作到文本域，程序无法获取该控件显示的网页元素对象，无法对网页文本域进行操作，即无法实现文本域的自动缩放，导致安装该操作系统的手机终端输入文本域的信息量受到限制。

综上所述，目前迫切需要一种方案，在手机操作系统不提供操作文本域的API接口时，来实现文本域的自适应缩放功能。

发明内容

本发明的目的是提供一种网页文本域高度自适应缩放方法及装置，以解决现有的一些手机操作系统不支持对文本域的操作，导致文本域输入信息量受到限制的问题。

本发明提出一种网页文本域高度自适应缩放方法，包括以下步骤：

使用内核控件打开带有文本域的页面；

调用内核控件注入并执行预设的JavaScript脚本；

监测导致页面文本域中文本发生变化的用户事件，进而获取文本域实际的高度和文本行数；

根据所述文本域的实际高度和文本行数，将文本域显示的高度设置成滚动高度。

本发明还提出一种网页文本域高度自适应缩放方法及装置，包括：

显示模块，用于使用内核控件打开带有文本域的页面；

脚本模块，其由JavaScript语言编译而成，用于监测导致页面文本域中文本发生变化的用户事件，并获取文本域实际的高度和文本行数；

执行模块，用于调用内核控件注入并执行所述脚本模块；

高度设置模块，用于根据所述脚本模块获取的文本域的实际高度和文本行数，将文本域显示的高度设置成滚动高度和文本行数。

相对于现有技术，本发明的有益效果是：本发明通过JavaScript编译的程序实现对网页文本域的监测，根据文本域中的文本变化，计算出文本域实际的高度和文本行数，从而使浏览器可以根据文本域的实际高度对其显示在页面上的高度作自适应性缩放，根本上消除了网页文本域中输入的信息量受到限制的问题，特别适合在Windows Phone7等不为文本域操作开放专用API接口的操作系统上使用。

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

附图说明

图1为本发明实施例的一种网页文本域高度自适应缩放方法的流程图；

图2为本发明实施例的一种网页文本域高度自适应缩放装置的结构图；

图3为本发明实施例的一种脚本模块的结构图。

具体实施方式

为更进一步阐述本发明达成预定发明目的所采取的技术手段及功效,以下结合附图及较佳实施例，对依据本发明提出的网页文本域高度自适应缩放方法及装置其具体实施方式、方法、步骤及功效，详细说明如后。

有关本发明的前述及其他技术内容、特点及功效，在以下配合参考图式的较佳实施例详细说明中将可清楚的呈现。通过具体实施方式的说明，当可对本发明为达成预定目的所采取的技术手段及功效得以更加深入且具体的了解，然而所附图式仅是提供参考与说明之用，并非用来对本发明加以限制。

本发明提出一种网页文本域高度自适应缩放方法，特别适合在操作系统不支持对文本域进行操作的手机终端上使用，现以应用于Windows Phone7操作系统为例进行详细说明，请参见图1，其包括以下步骤：

S11，使用内核控件打开带有文本域的页面。

可以通过浏览器的IE内核控件WebBrowser（WebBrowser是WP7操作系统提供的用于网页渲染显示和导航的可嵌入到程序中的控件）展现WEB页面内容。

S12，调用内核控件注入并执行预设的JavaScript脚本。

具体来说，可以通过WebBrowser控件提供的InvokeScript函数向网页注入JavaScript脚本，并使网页执行JavaScript脚本。

JavaScript是一种广泛用于客户端网页开发的脚本语言，可用来给HTML（Hypertext Markup Language，超文本标记语言，是用于描述网页文档的一种标记语言）网页添加动态功能，使用JavaScript语言可以操作网页的DOM元素（Document Object Model，文档对象模型，是一种用于HTML文档的编程接口，它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式，DOM把网页和脚本以及其他的编程语言联系了起来，脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素），所以可以通过注入和调用相关的JavaScript脚本来获取textarea标签（网页文本域的HTML标签，定义多行的文本输入控件）的对象和响应textarea标签的事件，达到操作网页文本域的目的。

S13，初始化文本域的高度以及文本格式。

通过执行JavaScript脚本，可以将浏览器显示页面中的文本域高度以及其中的文本格式设置为预设值，文本格式可以包括文字大小、文字间距、行间距等，对文本格式的初始化设置也便于后续文本行数的计算。例如，设置文本域中的字体大小为17px（Pixel，像素，px是相对于显示器屏幕分辨率而言的相对长度单位），设置文本域的高度值为50px，这样能够保证文本域的最小高度为50px，即为两行文本的高度，这样能更容易让用户意识到文本域可以输入多行文字。

S14，通过JavaScript脚本监测导致页面文本域中文本发生变化的用户事件，并获取文本域实际的高度和文本行数。

具体来说，可以通过监听onpropertychange事件、onkeyup事件和onresize事件实现对文本域中文本变化的监测。

onpropertychange事件是HTML元素的属性发生改变的通知事件，通过对onpropertychange事件的监听可以实现对除了删除文本以外的所有导致页面文本域中文本发生属性值变化的用户事件的监测。在IE中监听onpropertychange事件可以及时捕获到网页文本域的属性值变化，比如输入文本、粘贴文本等，但是对onpropertychange事件的监听并不能捕获到使用退格键删除文本的事件。

而onkeyup事件是键盘触发的通知事件，通过对onkeyup事件的监听可以实现对删除文本时键盘按键的用户事件的监测。当用户按下键盘删除按键并松开后可以及时被onkeyup事件捕获到，这样onpropertychange事件不能捕获到的删除文本的用户事件就能够被onkeyup事件捕获到。监听onkeyup事件可以弥补监听onpropertychange事件的不足，因此监听onpropertychange和onkeyup两个事件，网页文本域的文本发生变化就可以完全被捕获到。

onresize事件是文本域尺寸发生变化的通知事件。例如移动终端显示屏发生旋转而使文本域自适应旋转时，文本域的尺寸会相应的发生变化，从而可能由于文本域中文本行数的变化而致使文本域的实际高度也发生变化，因而需要通过对onresize事件的监听实现对导致文本域尺寸变化的用户事件的监测。

在监测到用户事件后，要为监测到的各个用户事件附加处理事件。具体来说，可以利用attachEvent函数为监听到的onpropertychange事件、onkeyup事件和onresize事件附加处理事件，这里所说的处理事件是指为所有用户事件赋予的一个统一的函数。也即是，onpropertychange事件、onkeyup事件和onresize事件触发后就会去执行附加的处理事件，让onpropertychange事件、onkeyup事件和onresize事件的附加处理事件指向同一个事件方法，这样就可以统一编写实现网页文本域输入框高度自适应缩放的逻辑，处理文本发生变化的事件。

通过附加的处理事件，可以获知文本域中文本的变化，从而便可以获取文本域实际的高度和文本行数。具体来说，根据处理事件可以获取文本矩形区域的数组然后根据文本矩形区域的数组，计算文本域的实际高度和当前的文本行数。具体方法如下：使用createTextRange函数为textarea对象创建一个TextRange对象，然后通过TextRange对象的getClientRects函数方法获取到文本矩形区域的数组。该数组中包含文本域文本框的上、下、左、右、宽、高六个坐标位置数据，因此从中可以直接获取文本域的实际高度。而由于文本域中的文本格式是已知的（步骤S13中经过初始化，即使没有经过初始化，也可以从文本域属性值中简单地获取），从而结合文本域的实际高度和文本格式，就能计算出当前的文本行数。

S15，根据文本域的实际高度和文本行数，将文本域显示的高度设置成滚动高度。

获取文本域的实际高度和文本行数后，接下来首先判断当前文本域的行数是否大于或者等于2，若大于等于2，则说明当前页面显示的文本域文本框高度可能不足以容纳所有文本。这时如果文本域显示的是带有滚动条的文本框，可以再判断当前滚动高度是否与实际高度一致（这里所述的滚动高度是指页面上所显示的带有滚动条滚动距离的文本框高度），如果不一致，则将文本域显示的高度设置成与文本域实际高度一致的滚动高度。这样做的原理是：文本域中文本的高度超过文本框自身的高度时，滚动条就会出现，这时文本域的滚动高度是大于文本框的高度的，只要通过浏览器参数的修改，就能够实现网页文本域输入框高度自适应缩放了。

本发明通过JavaScript脚本遍历并操作所有的textarea标签，获取文本域的属性，从而可以对网页文本域进行操作，最终实现网页文本域输入框高度自适应缩放的功能，根本上解决了网页文本域中输入的信息量受到限制的问题，特别可以在各种没有专门为文本域开放API接口的操作系统上使用。

通过本发明的网页文本域高度获取方法获取网页中文本域的实际高度和其中的文本行数后，将其传送给浏览器，便可以通过对浏览器进行程序控制以达到自适应调整文本域高度的功能。

本发明还提出一种网页文本域高度自适应缩放装置，请参见图2，其包括显示模块31、脚本模块32、执行模块33以及高度设置模块34，脚本模块32与显示模块31相连，执行模块33与脚本模块32相连，高度设置模块34分别与显示模块31和脚本模块32相连。

显示模块31用于使用内核控件开打网页，显示带有文本域的页面，其可以通过浏览器的IE内核控件WebBrowser展现WEB页面内容。

执行模块33用于调用内核控件注入并执行脚本模块32。具体来说，其可以通过WebBrowser控件提供的InvokeScript函数向网页注入脚本模块32，并使网页执行脚本模块32。

脚本模块32由JavaScript语言编译而成，用于监测导致页面文本域中文本发生变化的用户事件，并获取文本域实际的高度和文本行数。请参见图3，脚本模块32进一步包括监测单元321、处理事件附加单元322、获取单元323以及初始化单元324，监测单元321又进一步包括属性变化监测子单元3211、删除文本监测子单元3212及尺寸变化监测子单元3213，获取单元323又进一步包括区域数组获取子单元3231、高度计算子单元3232以及行数计算子单元3233。监测单元321和初始化单元324均与显示模块31相连。监测单元321的属性变化监测子单元3211、删除文本监测子单元3212和尺寸变化监测子单元3213均连接到处理事件附加单元322。获取单元323的区域数组获取子单元3231与处理事件附加单元322相连，高度计算子单元3232以及行数计算子单元3233均与区域数组获取子单元3231相连，且行数计算子单元3233与初始化单元324相连。

初始化单元324用于将显示模块31所显示的文本域的高度以及文本域中文本格式设置为预设值。文本格式可以包括文字大小、文字间距、行间距等，对文本格式的初始化设置也便于后续文本行数的计算。

监测单元321用于监测导致页面文本域中文本发生变化的用户事件。属性变化监测子单元3211用于监测除删除文本的用户事件以外的所有导致页面文本域中文本发生属性值变化的用户事件，其可以通过对onpropertychange事件的监听实现对除了删除文本以外的所有导致页面文本域中文本发生属性值变化的用户事件的监测。在IE中监听onpropertychange事件可以及时捕获到网页文本域的属性值变化，比如输入文本、粘贴文本等，但是对onpropertychange事件的监听并不能捕获到使用退格键删除文本的事件。

删除文本监测子单元3212用于监测删除文本时键盘按键的用户事件，其可以通过对onkeyup事件的监听实现对删除文本时键盘按键的用户事件的监测。当用户按下键盘删除按键并松开后可以及时被onkeyup事件捕获到，这样onpropertychange事件不能捕获到的删除文本的用户事件就能够被onkeyup事件捕获到。监听onkeyup事件可以弥补监听onpropertychange事件的不足，因此监听onpropertychange和onkeyup两个事件，网页文本域的文本发生变化就可以完全被捕获到。

尺寸变化监测子单元3213用于监测导致文本域尺寸变化的用户事件的监测，其可以通过对onresize事件的监听实现对文本域尺寸变化的监测。例如移动终端显示屏发生旋转而使文本域自适应旋转时，文本域的尺寸会相应的发生变化，从而可能由于文本域中文本行数的变化而致使文本域的实际高度也发生变化，因此可以通过对onresize事件的监听实现对导致文本域尺寸变化的用户事件的监测。

处理事件附加单元322用于为监测单元321检测到的各个用户事件附加处理事件，其可以利用attachEvent函数为属性变化监测子单元3211、删除文本监测子单元3212和尺寸变化监测子单元3213监测到的onpropertychange事件、onkeyup事件和onresize事件附加处理事件。处理事件是指为所有用户事件赋予的一个统一的函数。也即是，onpropertychange事件、onkeyup事件和onresize事件触发后就会去执行附加的处理事件，让onpropertychange事件、onkeyup事件和onresize事件的附加处理事件指向同一个事件方法，这样就可以统一编写实现网页文本域输入框高度自适应缩放的逻辑，处理文本发生变化的事件。

获取单元323用于根据处理事件附加单元322附加的处理事件，获取文本域实际高度和文本行数。具体来说，首先由区域数组获取子单元3231根据处理事件附加单元322附加的处理事件，获取文本矩形区域的数组，其可以使用createTextRange函数为textarea对象创建一个TextRange对象，然后通过TextRange对象的getClientRects函数方法获取到文本矩形区域的数组。该数组中包含文本域文本框的上、下、左、右、宽、高六个坐标位置数据。

然后由高度计算子单元3232和行数计算子单元3233根据文本矩形区域的数组，分别计算文本域的实际高度和文本域当前的文本行数。由于数组中包含文本域文本框的上、下、左、右、宽、高六个坐标位置数据，所以高度计算子单元3232从中可以直接获取文本域的实际高度。而由于文本域中的文本格式是经过初始化单元324初始化的（即使没有经过初始化，也可以从文本域属性值中简单地获取），从而行数计算子单元3233结合文本域的实际高度和文本格式，就能计算出当前的文本行数。

最后，高度设置模块34会根据脚本模块32获取的文本域的实际高度和文本行数，将文本域显示的高度设置成滚动高度和文本行数。在

获取文本域的实际高度和文本行数后，高度设置模块34首先会判断当前文本域的行数是否大于或者等于2，若大于等于2，则说明当前页面显示的文本域文本框高度可能不足以容纳所有文本。这时如果文本域显示的是带有滚动条的文本框，可以再判断当前滚动高度是否与实际高度一致（这里所述的滚动高度是指页面上所显示的带有滚动条滚动距离的文本框高度），如果不一致，则高度设置模块34会将文本域显示的高度设置成与文本域实际高度一致的滚动高度。

本发明通过JavaScript编译的程序实现对网页文本域的监测，根据文本域中的文本变化，计算出文本域实际的高度和文本行数，从而使浏览器可以根据文本域的实际高度对其显示在页面上的高度作自适应性操作，根本上消除了网页文本域中输入的信息量受到限制的问题，特别适合在Windows Phone7等不为文本域操作开放专用API接口的操作系统上使用。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本发明实施例可以通过硬件实现，也可以借助软件加必要的通用硬件平台的方式来实现。基于这样的理解，本发明实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质（可以是CD-ROM，U盘，移动硬盘等）中，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或网络设备等）执行本发明实施例各个实施场景所述的方法。

以上所述，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，虽然本发明已以较佳实施例揭露如上，然而并非用以限定本发明，任何熟悉本专业的技术人员，在不脱离本发明技术方案范围内，当可利用上述揭示的技术内容作出些许更动或修饰为等同变化的等效实施例，但凡是未脱离本发明技术方案内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化与修饰，均仍属于本发明技术方案的范围内。

Claims (12)

1.一种网页文本域高度自适应缩放方法，其特征在于，包括以下步骤：

使用内核控件打开带有文本域的页面；

调用内核控件注入并执行预设的JavaScript脚本；

监测导致页面文本域中文本发生变化的用户事件，进而获取文本域实际的高度和文本行数；

根据所述文本域的实际高度和文本行数，将文本域显示的高度设置成滚动高度。

2.如权利要求1所述的网页文本域高度自适应缩放方法，其特征在于，所述向浏览器注入并执行预设的JavaScript脚本的步骤之后还包括：将文本域的高度以及文本域中文本格式设置为预设值。

3.如权利要求1所述的网页文本域高度自适应缩放方法，其特征在于，所述监测导致页面文本域中文本发生变化的用户事件的步骤包括：

监测除删除文本以外的所有导致页面文本域中文本发生属性值变化的用户事件；

监测删除文本时键盘按键的用户事件；

监测导致文本域尺寸变化的用户事件。

4.如权利要求1所述的网页文本域高度自适应缩放方法，其特征在于，所述获取文本域实际的高度和文本行数的步骤包括：

为监测到的各个用户事件附加处理事件，并根据所述处理事件附加单元附加的处理事件，获取文本域实际高度和文本行数。

5.如权利要求4所述的网页文本域高度自适应缩放方法，其特征在于，所述根据所述处理事件附加单元附加的处理事件，获取文本域实际高度和文本行数的步骤包括：

根据附加的所述处理事件，获取文本矩形区域的数组；

根据所述文本矩形区域的数组，计算文本域的实际高度；

根据所述文本矩形区域的数组，计算文本域当前的文本行数。

6.如权利要求1所述的网页文本域高度自适应缩放方法，其特征在于，所述内核控件为WebBrowser控件。

7.一种网页文本域高度自适应缩放装置，其特征在于，包括：

显示模块，用于使用内核控件打开带有文本域的页面；

脚本模块，其由JavaScript语言编译而成，用于监测导致页面文本域中文本发生变化的用户事件，并获取文本域实际的高度和文本行数；

执行模块，用于调用内核控件注入并执行所述脚本模块；

高度设置模块，用于根据所述脚本模块获取的文本域的实际高度和文本行数，将文本域显示的高度设置成滚动高度和文本行数。

8.如权利要求7所述的网页文本域高度自适应缩放装置，其特征在于，所述脚本模块进一步包括：

监测单元，用于监测导致页面文本域中文本发生变化的用户事件；

处理事件附加单元，用于为所述监测单元检测到的各个用户事件附加处理事件；

获取单元，根据所述处理事件附加单元附加的处理事件，获取文本域实际高度和文本行数。

9.如权利要求8所述的网页文本域高度自适应缩放装置，其特征在于，所述监测单元进一步包括：

属性变化监测子单元，用于监测除删除文本的用户事件以外的所有导致页面文本域中文本发生属性值变化的用户事件；

删除文本监测子单元，用于监测删除文本时键盘按键的用户事件；

尺寸变化监测子单元，用于监测导致文本域尺寸变化的用户事件。

10.如权利要求8所述的网页文本域高度自适应缩放装置，其特征在于，所述获取单元进一步包括：

区域数组获取子单元，用于根据所述处理事件附加单元附加的处理事件，获取文本矩形区域的数组；

高度计算子单元，用于根据所述文本矩形区域的数组，计算文本域的实际高度；

行数计算子单元，用于根据所述文本矩形区域的数组，计算文本域当前的文本行数。

11.如权利要求8所述的网页文本域高度自适应缩放装置，其特征在于，所述脚本模块还包括：

初始化单元，用于将文本域的高度以及文本域中文本格式设置为预设值。

12.如权利要求7所述的网页文本域高度自适应缩放装置，其特征在于，所述内核控件为WebBrowser控件。