实现网页控件之间自由切换的方法 【技术领域】
本发明涉及互联网上的网页，尤其涉及网页上的控件技术。
背景技术
互联网在现代生活中越来越普及，世界各地的计算机终端都可以通过互联网连接在一起；终端用户可以通过电话线，或者光缆，将自己的计算机连接到互联网上，同时也可以通过浏览互联网上的网页获取自己所需要的信息、资料等，例如：终端用户可以通过浏览互联网上的网页下载文件，音乐以及浏览新闻等。现有技术中的网页包括有许多由HTML语言定义的标准控件(所谓标准控件指的是超文本链接语言HTML定义的控件)，例如：
有关form和input控件的标准控件代码：
<form action＝/cgi-bin/post-query method＝POST>
您的姓名：
<input type＝text name＝姓名> {！--文本输入框--}
您的主页地网址：
<input type＝text name＝网址value＝http：//> {！--网址输入框--}
密码：
<input type＝password name＝密码> {！--密码输入框--}
<input type＝submit value＝″发送″> {！--提交--}
<input type＝reset value＝″重设″> {！--重设--}
</form>
对于上述有关form和input的标准控件，用户通过键盘上的TAB键只可以按顺序地选择上述控件；
现有技术中有关表格的标准控件：
<table>
<tr> {！--表行定义--}
<th>Food</th> {！--表头定义--}
<th>Drink</th> {！--表头定义}
<th>Sweet</th> {！--表头定义}
</tr>
<tr>
<td>A</td> {！--表元定义--}
<td>B</td> {！--表元定义--}
<td>C</td> {！--表元定义--}
</tr>
</table>
同样，对于上述现有技术中存在的有关表格的标准控件，用户通过键盘上的TAB键只可以顺序地选择表格中的单元格；对于现有技术中的标准控件，用户通过键盘上的TAB键不可以按自定义或其它更自由的方式，在各个控件间进行选择。
【发明内容】
针对现有技术中存在的上述技术问题，本发明提出了一种实现WEB网页控件之间自由切换的方法，包括下列步骤：
定义非标准控件的自定义属性；
判断键盘上被用户按下的键；
根据用户按下的键以及非标准控件的自定义的属性值来确定下一个控件；并使得到的下一个控件为当前控件。
所述非标准控件的自定义属性包括：TabNext属性和TabPrevious属性；
所述TabNext属性，用于定义当前非标准控件所要链接的下一个控件；
所述TabPrevious属性，用于定义当前非标准控件所要链接的上一个控件。
所述的用户按下的键包括TAB键和TAB+Shift键。
所述的非标准控件为非标准表格控件。所述的非标准控件的自定义属性还包括：
CustomTable属性，用于定义表格控件为非标准表格控件还是标准表格控件。
其中所述的CustomTable属性进一步包括：
当表格控件的CustomTable属性值为true时，该表格控件为非标准表格控件；当表格控件的CustomTable属性值为false，或者表格控件没有定义CustomTable属性时，该表格控件为标准表格控件。其中所述的用户按下的键包括：
所述的用户按下的键包括：自定义的向下的方向键、向上的方向键、向左的方向键和向右的方向键；
当表格控件的CustomTable属性值为true时，也就是该表格控件为非标准表格控件时，如果用户按下了向下的方向键，判断是否存在下一行单元格，如果存在下一行单元格，那么，将光标移动到下一行单元格，使下一行单元格成为当前单元格，否则，光标位置不变；
当用户按下了向上的方向键，判断是否存在上一行单元格，如果存在上一行单元格，那么，将光标移动到上一行单元格，使上一行单元格成为当前单元格，否则，光标位置不变；
当用户按下了向左的方向键，判断左边是否存单元格，如果左边存在单元格，那么，将光标移动到左边的单元格，使左边的单元格成为当前单元格，否则，光标位置不变；
当用户按下了向右的方向键，判断右边是否存单元格，如果右边存在单元格，那么，将光标移动到右边的单元格，使右边的单元格成为当前单元格，否则，光标位置不变；
根据当前单元格所在列的数据类型，添加相应数据类型的input控件，以便用户在当前单元格中输入相应数据类型的数据，并且当光标离开当前单元格时，所输入的数据显示在当前单元格内。
其中所述的非标准控件为非标准input控件。
所述的用户按下的键包括TAB键和TAB+Shift键。
所述的自定义属性包括：TabNext属性和TabPrevious属性；
所述TabNext属性，用于定义当前input控件所要链接的下一个input控件；
所述TabPrevious属性，用于定义当前input控件所要链接的上一个input控件。
所述的TabNext属性的值为当前input控件所要链接的下一个input控件的ID值；
所述TabPrevious属性的值为当前input控件所要链接的上一个input控件的ID值。
当用户按下了TAB键，获取当前input控件的TabNext属性值；
判断当前input控件的TabNext属性值是否为nu11，如果是，不作任何操作，当前控件仍然使当前控件；否则，继续判断是否存在TabNext属性值所指定的控件；
如果不存在TabNext属性值所指定的控件，则不作任何操作，当前控件仍然为当前控件；如果存在，则将光标移动到TabNext属性值所指定的控件，使TabNext属性值所指定的控件成为当前控件。
当用户按下了TAB+Shift键，获取当前input控件的TabPrevious属性值；
判断当前input控件的TabPrevious属性值是否为nu11，如果是，不作任何操作，当前控件仍然使当前控件；否则，继续判断是否存在TabPrevious属性值所指定的控件；
如果不存在TabPrevious属性值所指定的控件，则不作任何操作，当前控件仍然为当前控件；如果存在，则将光标移动到TabPrevious属性值所指定的控件，使TabPrevious属性值所指定的控件成为当前控件。
由于本发明采用了自定义属性，例如：TabNext和TabPrevious等属性，使得WEB网页上的控件之间的链接关系更灵活，从而，用户可以通过TAB键、TAB+Shift键，或其它自定义键更方便地在WEB网页上的控件之间自由切换；通过本发明所述的非标准表格控件，用户可以方便地在网页上的表格中输入相应数据类型的数据。
【附图说明】
图1为网页控件之间的自由切换方法的流程图；
图2为定义非标准控件的示意图；
图3为非标准控件和标准控件示意图；
图4为非标准表格中数据输入方法的流程图。
【具体实施方式】
在说明本发明的具体实施例之前，让我们首先看一下现有技术中使用HTML语言定义的标准控件，例如：
标准input控件：
<form action＝/cgi-bin/post-query method＝Post>
<input type＝”text”name＝”name1”> {！--文本输入框
--}
<span>
<input type＝”text”name＝”name2”> {！--文本输
入框--}
<input type＝”hidden”name＝”name3”> {！--隐藏框
--}
<input type＝”radio”name＝”name4”> {！--单选框
--}
</span>
<input type＝”text”name＝”name5”> {！--文本框--}
<input type＝”submit”> {！--提交--}
<input type＝”reset”> {！--重设--}
</form>
标准表格控件：
<table border＝”1”cellspacing＝”0”cellpadding＝”0”>
<thead> {！--定义表头--}
<tr> {！--定义表行--}
<td style＝”width：120”name＝”cinvname”>名称</td>
{！--定义表元--}
<td style＝”width：120”name＝”fquantity”>数量</td>
{！--定义表元--}
<td style＝”width：120”name＝”fprice”>单价</td>
{！--定义表元--}
<td style＝”width：120”name＝”fmoney”>金额</td>
{！--定义表元--}
</tr>
</thead>
<tbody> {！--定义表体--}
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td align＝”center”>合计</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tfoot>
</table>
在上述现有技术的标准控件的基础之上，本发明在控件中添加了自定义的属性：TabNext属性和TabPrevious属性，以及用于表格控件的自定义属性CustomTable属性。这种具有自定义属性的控件我们称之为非标准控件；
TabNext属性中定义的是非标准控件所要链接的下一个控件的ID属性值；
TabPrevious属性定义的是非标准控件所要链接的上一个控件的ID属性值；
CustomTable属性定义的是表格为标准表格还是非标准表格；即，如果CustomTable＝true，那么表格为非标准表格，CustomTable＝false或者没有定义CustomTable属性，那么表格为标准表格。
下面我们结合图1详细描述本发明所述的实现网页控件之间自由切换的方法；
首先，步骤S101，捕捉网页页面上的键盘按下事件；当用户浏览网页页面时，捕捉用户是否按下了键盘上的某个键，并获取其按下的键值；
步骤S102，根据步骤S101获得的键值，来判断用户按下的键是键盘上的那个键；
步骤S104，如果用户未按下TAB键，也未同时按下TAB+Shift键；
那么步骤S107，不作任何操作；
步骤S103，如果用户只按下了TAB键；
步骤S106，获取当前控件的TabNext属性值；
步骤S120，判断当前控件的TabNext属性值是否为nu11；
步骤S122，当前控件的TabNext属性值为nu11时，不作任何操作，光标仍停留在当前控件上；
步骤S109，当前控件的TabNext属性值不为nu11时，判断是否存在当前控件的TabNext属性值指定的控件；
如果不存在当前控件的TabNext属性值指定的控件，那么执行步骤S122，不作任何操作，光标仍然停留在当前控件上；
步骤S121，如果存在当前控件的TabNext属性值指定的控件，那么将光标移动到TabNext属性值所指定的控件，即，使TabNext属性值指定的控件成为当前控件；
步骤S105，如果用户同时按下了TAB和Shift键；
步骤S108，获取当前控件的TabPrevious属性值；
步骤S123，判断当前控件的TabPrevious属性值是否为nu11；
步骤S125，当前控件的TabPrevious属性值为nu11时，不作任何操作，光标仍然停留在当前控件上；
步骤S124，当前控件的TabPrevious属性值不为nu11时，判断是否存在当前控件的TabPrevious属性值指定的控件
步骤S126，如果存在当前控件TabPrevious属性值指定的控件，那么将光标移到TabPrevious属性值指定的控件，即，TabPrevious属性值指定的控件为当前控件；
具体实施例一：
参照图2，相对于上述使用HTML语言定义的标准控件，我们可以定义一个本发明使用的非标准控件，具体控件定义代码如下：
<form action＝/cgi-bin/post-query method＝Post>
<input ID＝”ID-A”type＝”text”name＝”name1”
TabNext＝”TD-B”>
<span ID＝”ID-B”TabPrevious＝”ID-A”TabNext＝”ID-C”>
<input type＝”text”name＝”name2>
<input type＝”hidden”name＝”name3”>
<input type＝”radio”name＝”name4”>
</span>
<input ID＝”ID-C”type＝”text”name＝”name5”
TabPrevious＝”ID-B”>
<input type＝”submit”>
<input type＝”reset”>
</form>
在本发明中我们称<input ID＝”ID-A”type＝”text”
name＝”name1”TabNext＝”ID-B”>为非标准控件A；
<span ID＝”ID-B”TabPrevious＝”ID-A”
TabNext＝”ID-C”>
<input type＝”text”name＝”name2”>
<input type＝”hidden”name＝”name3”>
<input type＝”radio”name＝”name4”>
</span>为非标准控件B；
<input ID＝”ID-C” type＝”text”name＝”name5”
TabPrevious＝”B”>为非标准控件C；
其中，非标准控件A、B、C中的ID属性值分别设置为ID-A、ID-B和ID-C；ID属性值是唯一标识控件的值。
非标准控件A的TabNext属性设置为非标准控件B的ID属性值，即ID-B；
非标准控件B的TabPrevious属性值设置为非标准控件A的ID属性值，即ID-A；
非标准控件B的TabNext属性设置为ID-C；
非标准控件C的TabPrevious属性值设置为ID-B；
下面我们将结合上述具体的有关非标准控件A、B、C的代码，对本发明的实现网页控件之间自由切换的方法进行更详细的描述：
首先，我们假设当前控件是非标准控件A，即，当前控件是：
<input ID＝”ID-A”type＝”text”name＝”name1”
TabNext＝”ID-B”>时，那么，
当用户浏览网页页面时，捕捉用户是否按下了键盘上的某个键，并获取其按下的键值；
根据获取的键值，判断用户按下的是那个键；
如果用户按下的是TAB键，那么读取非标准控件A的TabNext属性值，即：ID-B，判断ID-B所指定的控件是否存在，在本实施例中ID-B指定的控件是非标准控件B，于是，将光标将移动到ID-B指定的控件，即非标准控件B变为当前控件；如果用户按下了除TAB键以外的键，例如，同时按下了TAB和Shift键或其它任何键，或者未按任何键，那么当前控件仍然为非标准控件A；
此时，我们假设用户按下了TAB键，那么当前控件为B，即，当前控件为：
<span ID＝”ID-B”TabPrevious＝”ID-A”
TabNext＝”ID-C”>
<input type＝”text”name＝”name2”>
<input type＝”hidden”name＝”name3”>
<input type＝”radio”name＝”name4”>
</span>时，
此时，如果用户紧接着又按下TAB键，那么，取得非标准控件B的TabNext属性值，即：ID-C，然后判断ID-C所指定的控件是否存在，在本实施例中存在ID-C指定的控件，ID-C指定的控件为非标准控件C，于是，如果用户又按下了TAB键，那么光标将移动到ID-C指定的控件，即非标准控件C变为当前控件；如果此时用户同时按下TAB+Shift键时，取得非标准控件B的TabPrevious属性值：ID-A，然后判断ID-A所指定的控件是否存在，在本实施例中ID-A指定的控件为非标准控件A，于是，当用户同时按下TAB+Shift键时，光标移到非标准控件A，即非标准控件A变为当前控件；当用户按下除了TAB和Shift键以外的键或未按任何键，当前控件仍然为非标准控件B；
现，我们假设用户按下了TAB键，那么当前控件为非标准控件C，即，当前控件为：
<input ID＝”ID-C”type＝”text”name＝”name5”
TabPrevious＝”ID-B”>
当非标准控件C成为当前控件后，如果用户同时按下了TAB+Shfit键，那么获取非标准控件C的TabPrevious属性值，即：ID-B，判断ID-B指定的控件是否存在，在本实施例中ID-B指定的控件为非标准控件B，于是光标移动到ID-B指定的控件，即非标准控件B将成为当前控件；如果用户没有同时按下TAB+Shfit键，那么当前控件仍然为非标准控件C。
上述具体实施例中描述了网页中非标准控件与非标准控件之间的自由切换，下面我们将结合具体控件代码进一步描述网页非标准控件与标准控件之间的自由切换；
具体实施例二
参照图3，我们定义一下有关控件的代码：
<form action＝/cgi-bin/post-query method＝Post>
<input type＝”text”name＝”name6”>
<input ID＝”ID-A”type＝”text”name＝”name1”
TabNext＝”ID-B”>
<input type＝”text”name＝”name7”>
<span ID＝”ID-B”TabPrevious＝”ID-A”
TabNext＝”ID-C”>
<input type＝”text”name＝”name2”>
<input type＝”hidden”name＝”name3”>
<input type＝”radio”name＝”name4”>
</span>
<input ID＝”ID-C”type＝”text”name＝”name5”
TabPrevious＝”ID-B”>
<input type＝”submit”>
<input type＝”reset”>
</form>
在本发明中，我们称<input type＝”text”name＝”name6”>为标准控件D；
<input type＝”text”name＝”name7”>为标准控件E；
其它控件分别是非标准控件A、B、C(参见具体实施例之一的详细说明)。
在本实施例中，我们假设当前控件是：标准控件D；
当用户浏览网页页面时，捕捉用户是否按下了键盘上的某个键，并获取其按下的键值；
根据获取的键值，判断用户按下的是那个键，如果用户按下了TAB键，则将光标移动到非标准控件A，使非标准控件A成为当前控件；如果用户按下了除TAB键外的其它键或者没有按下任何键，则当前控件仍然为标准控件D(有关此步骤的实现利用现有技术中公知的技术实现的，因此，在此不详细说明)；
在这个实施例中，我们假设用户此时按下了TAB键，那么当用户按下TAB键后，当前控件由标准控件D变为非标准控件A，紧接着，如果用户又按下了TAB键，那么获取非标准控件A的Tabnext属性值，根据非标准控件A的TabNext＝ID-B属性的定义，当前控件由非标准控件A变为非标准控件B；这里需要解释的是：虽然标准控件E紧跟在非标准控件A的后面，但是由于非标准控件A中定义了Tabnext＝ID-B，所以当用户按下TAB键后，当前控件由非标准控件A变为非标准控件B，而不是标准控件E；紧接着，如果用户同时按下了TAB+Shift键，那么获取非标准控件B的TabPrevious属性值，即：ID-A，根据非标准控件B的TabPrevious属性值的定义，将光标移动到非标准控件A，使非标准控件A成为当前控件；如果用户按下的键是TAB键的话，那么根据非标准控件B的TabNext＝ID-C属性值定义，将光标移动到非标准控件C上，使非标准控件C成为当前控件。
具体实施例三：
参照图4，在本实施例中，我们假设当前控件为非标准表格控件，且定义键盘上的四个方向键为操作非标准表格的方向键，但本发明并不局限于将键盘上的四个方向键定义为方向键，本领域普通技术人员知道，也可以将键盘上的其它键定义为方向键；非标准表格控件具体代码为：
<table CustomTable＝”true”border＝”1”cellspacing＝”0”
cellpadding＝”0”>
<thead>
<tr>
<td style＝”width：120”type＝”0”name＝”cinvname”></td>
<td style＝”width：120”type＝”1”name＝”fquantity”>名称
</td>
<td style＝”width：120”type＝”2”name＝”fprice”>单价
</td>
<td style＝”width：120”type＝”2”name＝”fmoney”>金额
</td>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td align＝”center”>合计</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tfoot>
</table>
此外，相对于上述表格中各个列的数据类型：type＝”0”，type＝”1”，type＝”2”我们还需定义一个相应于各个列数据类型的输入框数组A，以便在自定义表格中添加相应的输入框；数组A的定义如下：
var itemAry＝new Array()；{！--定义单元格不同数据类型输入框数组--}
{！--禁止输入--}
itemAry[0]＝″″；
{！--选择--}
itemAry[1]＝″<input type＝′text′s tyle＝′text-align：1eft
border-right-width：Opx；word-wrap：break-word；′>″
{！--数字--}
itemAry[2]＝″<input type＝′text′
style＝′text-align：right；word-wrap：break-word；′maxLength＝16>″
具体方法如下：
步骤S401，获取非标准表格控件的CustomTable属性值；
步骤S402，判断CustomTable属性值是否等于true；
步骤S403，如果CustomTable属性值不等于true，那么自定义表格中的当前单元格失去焦点；
步骤S403，如果CustomTable属性值等于true；
步骤S404，获取用户按下的键；
步骤S405，如果用户按下了向上的方向键；
则，
步骤S406，判断是否存在上一行单元格；
步骤S407，如果存在上一行单元格，那么将光标移动到上一行单元格上，使上一行单元格成为当前单元格；
步骤S408，如果不存在上一行单元格，那么光标仍停留在当前单元格上；
步骤S409，如果用户按下了向下的方向键；
则，
步骤S410，判断是否存在下一行单元格；
步骤S411，如果存在下一行单元格，那么将光标移动到下一行单元格上，使下一行单元格成为当前单元格；
步骤S412，如果不存在下一行单元格，那么光标仍停留在当前单元格上；
步骤S413，如果用户按下了向左的方向键；
则，
步骤S414，判断左边是否存在有单元格；
步骤S415，如果左边存在单元格，那么将光标移动到左边的单元格上，
使左边的单元格成为当前单元格；
步骤S416，如果左边不存在单元格，那么光标仍然停留在当前单元格上；
步骤S421，根据当前单元格所在列的表头中单元格的type属性，即：通过
<td style＝”width：120”type＝”1”name＝”cinvname”>名称
</td>
<td style＝”width：120”type＝”300142”
name＝”fquantity”>数量</td>
<td style＝”width：120”type＝”310122”name＝”fprice”>单价</td>
<td style＝”width：120”type＝”000140”name＝”fmoney”>金额</td>
中定义的type属性值，获取当前单元格所在列的数据类型；
步骤S422，根据当前单元格所在列的数据类型，以及上述数组A的定义，在当前单元格中添加相应数据类型的input控件，即，添加相应的输入框；
用户可在添加的输入框中填写相应数据类型的数据；
当用户填写完数据，光标离开当前单元格时，用户所填写的数据内容将显示在单元格中。
虽然本发明的具体实施例中定义了当用户按下TAB键时，获取非标准控件的TabNext属性值，当用户同时按下TAB和TAB+Shift键时，获取非标准控件的TabPrevious属性值，但是，本发明并不仅仅限于上述实施例中所述的TAB和TAB+Shift键，本领域普通技术人员可定义键盘上的任何键来代替TAB和TAB+Shift键。
在本发明中提到的控件是包括标准控件和非标准控件的。