CN103838475A - 网页中进行文本框输入的方法及装置 - Google Patents

Abstract

本发明公开了网页中进行文本框输入的方法及装置，其中，该方法包括：监听网页中的文本框，获取输入文本框的内容；判断输入后的内容高度是否大于展示框高度，如果是，则将展示框高度与设定高度值进行求和，得到求和值，将展示框高度增加为求和值；并将文本区域高度与设定高度值进行求和，得到求和值，将文本区域高度增加为求和值；将输入的内容显示在展示框中。本发明方案能够结合文本框短小的特点，避免出现滚动条，并能够根据输入的内容实时对文本框进行调整。

Description

网页中进行文本框输入的方法及装置

技术领域

本发明涉及网页技术领域，尤其涉及网页中进行文本框输入的方法及装置。

背景技术

网页中常出现文本框，目前，为了美观，文本框只能容下两、三行内容；当文本框不能容纳输入的内容时，则以滚动条的方式显示。

对于输入的内容较少或长度较短的情况，现有方案具有明显的优势，不仅节省空间，还可完全显示所有的内容。当输入的内容较多或较长时，则以滚动条方式进行输入，该方式存在以下缺陷：不能显示出所有的输入内容，且会出现滚动条，通过上下滚动来显示、定位输入的内容，其操作不便。参见图1，为现有技术网页中显示的文本框实例，图中粗线框限定的范围为展示框；在粗线框限定的区域内，点击鼠标，出现闪烁的输入焦点的范围都可以输入文本，将粗线框内能够输入文本的范围称为文本区域；文本区域能够显示的内容最大高度可达到展示框高度。图1中，将长度提示内容显示在文本框的右下角，该实例中长度提示内容为“可输入128字”。

发明人在实际应用中发现，如果能够避免使用滚动条，且结合文本框短小的特点，以适用于输入的内容较少和较多的情况，将进一步满足需求，但目前还没有这方面的技术。

发明内容

本发明提供了一种网页中进行文本框输入的方法，该方法能够结合文本框短小的特点，避免出现滚动条，并能够根据输入的内容实时对文本框进行调整。

本发明提供了一种网页中进行文本框输入的装置，该装置能够结合文本框短小的特点，避免出现滚动条，并能够根据输入的内容实时对文本框进行调整。

一种网页中进行文本框输入的方法，该方法包括：

监听网页中的文本框，获取输入文本框的内容；

判断输入后的内容高度是否大于展示框高度，如果是，则将展示框高度与设定高度值进行求和，得到求和值，将展示框高度增加为求和值；并将文本区域高度与设定高度值进行求和，得到求和值，将文本区域高度增加为求和值；

将输入的内容显示在展示框中。

一种网页中进行文本框输入的装置，该装置包括文本框监听单元、高度调整单元和显示单元；

所述文本框监听单元，监听网页中的文本框，获取输入文本框的内容，传送给所述显示单元；判断输入后的内容高度是否大于展示框高度，如果是，则向所述高度调整单元发送调整指令；

所述高度调整单元，接收调整指令，将展示框高度与设定高度值进行求和，得到求和值，将展示框高度增加为求和值；并将文本区域高度与设定高度值进行求和，得到求和值，将文本区域高度增加为求和值；向所述显示单元发送显示指令；

所述显示单元，接收来自所述高度调整单元的显示指令，在展示框中显示来自所述文本框监听单元的内容。

从上述方案可以看出，在判断出输入后的内容高度大于展示框高度时，将展示框高度与设定高度值进行求和，得到求和值，将展示框高度增加为求和值；并将文本区域高度与设定高度值进行求和，得到求和值，将文本区域高度增加为求和值。本发明中，输入的内容较多时才调整文本框高度，如果输入的内容较少，则不对文本框高度进行调整；这样，根据输入的内容实时对文本框进行调整，避免了滚动条的使用，也结合文本框短小的特点，进一步满足了需求。

附图说明

图1为现有技术网页中显示的文本框实例一；

图2为本发明网页中进行文本框输入的方法示意性流程图；

图3为本发明网页中显示的文本框实例；

图4为现有技术网页中显示的文本框实例二；

图5为本发明网页中进行文本框输入的装置结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，下面结合实施例和附图，对本发明进一步详细说明。

本发明根据输入的内容实时对文本框进行调整，避免使用滚动条。参见图2，为本发明网页中进行文本框输入的方法示意性流程图，其包括以下步骤：

步骤201，监听网页中的文本框，获取输入文本框的内容。

步骤202，判断输入后的内容高度是否大于展示框高度，如果是，则将展示框高度与设定高度值进行求和，得到求和值，将展示框高度增加为求和值；并将文本区域高度与设定高度值进行求和，得到求和值，将文本区域高度增加为求和值。

参见图3，为本发明网页中显示的文本框实例，文本框中已经没有滚动条，图中粗线框限定的范围为展示框，展示框的高度称为展示框高度；在粗线框限定的区域，点击鼠标，出现闪烁的输入焦点的范围都可以输入文本，将粗线框内能够输入文本的范围称为文本区域，将文本区域的高度称为文本区域高度；文本区域能够显示的内容最大高度可达到展示框高度。

本步骤所述输入后的内容高度可具体采用如下方式确定：将文本框当前的内容和输入的内容结合得到输入后的内容，由文本区域宽度和得到的输入后内容，确定出内容高度。由于文本区域宽度一定，得到输入后的内容后，将输入后内容的总长度除以文本区域宽度，便可得到输入后的内容高度。

本步骤中，如果判断出输入后的内容高度大于展示框高度，则表明输入的内容将超出展示框，需要调整文本区域和展示框的高度；如果判断出输入后的内容高度小于或等于展示框高度，则表明内容较少，无需对文本框的文本区域和展示框进行调整。

本步骤所述的设定高度值，可根据需要进行设置，例如为一行内容所占的高度。

步骤203，将输入的内容显示在展示框中。

调整文本框的文本区域和展示框后，将内容显示在展示框中。

现有技术中，长度提示内容多设在展示框的右下角，进行文本输入时，当输入的内容较多或较长时，长度提示内容将覆盖用户输入的内容，如图4所示；即使将长度提示内容设置为半透明，仍会影响输入的内容的可见性，也会影响长度提示内容的可见性，不是很好的解决方案。

针对这种情况，本发明将长度提示内容显示在展示框的最末一行，具体地，可以在某末一行的右侧，即在展示框的右下角；相应地，上述流程步骤201获取输入文本框的内容之后，该方法进一步包括：

判断输入的内容是否占用长度提示内容所在行的空间，如果是，则将展示框高度与设定高度值进行求和，得到求和值，将展示框高度增加为求和值；并将文本区域高度与设定高度值进行求和，得到求和值，将文本区域高度增加为求和值。这样，输入展示框的内容在任何情况下都不会占用长度提示内容所在行，也就是，输入展示框的内容在任何情况下都不会覆盖长度提示内容；如图3所示的实例，展示框原始展示框高度和原始文本区域高度为三行，初始输入时，长度提示内容放置在第三行右侧，当输入的内容需要占用第三行时，则增加文本区域和展示框的高度，并仍将长度提示内容显示在最末一行，即第四行。

进一步地，为了节省空间，上述流程步骤201获取输入文本框的内容之后，该方法还包括：

判断文本框中的内容是否为空，如果是，则将文本框的展示框高度和内容高度设置为原始展示框高度和原始文本区域高度。

某些情况下，进行鼠标操作时，可能操作失误，点击在长度提示内容上，针对这种情况，上述流程步骤201获取输入文本框的内容之后，该方法还包括：

判断输入焦点是否点击在长度提示内容上，如果是，则将输入焦点移至文本框中除长度提示内容外的位置进行显示。

所述判断输入焦点是否点击在长度提示内容上包括：监听长度提示内容的点击（click）事件是否发生。

具体实践时，本发明网页中进行文本框输入的方案可采用<rextarea>控件，通过javascrip体现，下面进行详细说明：

a）监听网页中的文本框可通过监听输入（input）事件或属性变化（propertychange）事件是否发生实现；IE浏览器采用input事件，firefox浏览器和chrome浏览器采用propertychange事件。当输入后的内容高度（scrollHeight）大于展示框高度（clientHeight）时，说明文本框内的内容长度超过了显示长度，就为文本区域和展示框增加一行的高度。示例代码如下：

b）当文本框内的内容为空时，还原文本框的展示框高度和文本区域高度。示例代码：

c）当长度提示内容被点击的时候，需要将输入焦点设置在展示框中除长度提示内容所占空间的其他位置，避免展示本框中输入焦点丢失。实现方法：监听关于长度提示内容的click事件，事件发生时，调用文本框的focus()方法，手动设置输入焦点。

具体实现时，本发明方案还可基于现有网页设计方案改进得到，具体地，可将关于文本框的风格样式表（CSS，Style Sheet Sheet）中的滚动条（overflow）属性修改为隐藏（hidden），这样便可隐藏滚动条；并且，步骤202中的内容高度对应现有方案中涉及的滚动高度。

本发明保留了文本框短小的特性，适用于输入的内容较少的情况；并且，当输入的内容较多时，文本框的高度将随着内容高度的变化而变化，这样，无需采用滚动条方式，避免了滚动条的出现。另外，将长度提示内容移入文本框的右下角，并根据输入内容的高度对文本框高度进行调整，使文本框和长度提示内容之间更加紧密协调，界面更加美观，也不会覆盖输入的内容。从而，达到了文本框高度根据需要改变，避免了滚动条的出现，也避免了长度提示内容覆盖内容的情况，进一步满足了需求。

参见图5，为本发明网页中进行文本框输入的装置结构示意图，该装置包括文本框监听单元、高度调整单元和显示单元；

所述文本框监听单元，监听网页中的文本框，获取输入文本框的内容，传送给所述显示单元；判断输入后的内容高度是否大于展示框高度，如果是，则向所述高度调整单元发送调整指令；

所述高度调整单元，接收调整指令，将展示框高度与设定高度值进行求和，得到求和值，将展示框高度增加为求和值；并将文本区域高度与设定高度值进行求和，得到求和值，将文本区域高度增加为求和值；向所述显示单元发送显示指令；

所述显示单元，接收来自所述高度调整单元的显示指令，在展示框中显示来自所述文本框监听单元的内容。

可选地，所述显示单元，还将长度提示内容显示在文本框的右下角，所述文本框监听单元包括内容监听子单元和覆盖判断子单元；

所述内容监听子单元，监听网页中的文本框，获取输入文本框的内容，传送给所述显示单元和所述覆盖判断子单元；

所述覆盖判断子单元，判断输入的内容是否占用长度提示内容所在行的空间，如果是，则向所述高度调整单元发送调整指令。

可选地，所述文本框监听单元包括内容容量监听子单元，判断文本框中的内容是否为空，如果是，则向所述高度调整单元发送还原指令；

所述高度调整单元，接收来自所述内容容量监听子单元的还原指令，将文本框的展示框高度和内容高度设置为原始展示框高度和原始文本区域高度。

可选地，所述文本框监听单元包括焦点监听子单元，判断输入焦点是否点击在长度提示内容上，如果是，则向所述显示单元发送焦点移动指令；

所述显示单元，接收来自所述焦点监听子单元的焦点移动指令，将输入焦点移至文本框中除长度提示内容外的位置进行显示。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (10)

1.一种网页中进行文本框输入的方法，其特征在于，该方法包括：

监听网页中的文本框，获取输入文本框的内容；

判断输入后的内容高度是否大于展示框高度，如果是，则将展示框高度与设定高度值进行求和，得到求和值，将展示框高度增加为求和值；并将文本区域高度与设定高度值进行求和，得到求和值，将文本区域高度增加为求和值；

将输入的内容显示在展示框中。

2.如权利要求1所述的方法，其特征在于，所述输入后的内容高度的确定方法包括：

将文本框当前的内容和输入的内容结合得到输入后的内容，由文本区域宽度和得到的输入后内容，确定出输入后的内容高度。

3.如权利要求1所述的方法，其特征在于，该方法还包括：将长度提示内容显示在展示框的最末一行；所述获取输入文本框的内容之后，该方法还包括：

判断输入的内容是否占用长度提示内容所在行的空间，如果是，则将展示框高度与设定高度值进行求和，得到求和值，将展示框高度增加为求和值；并将文本区域高度与设定高度值进行求和，得到求和值，将文本区域高度增加为求和值。

4.如权利要求1所述的方法，其特征在于，所述获取输入文本框的内容之后，该方法还包括：

判断文本框中的内容是否为空，如果是，则将文本框的展示框高度和内容高度设置为原始展示框高度和原始文本区域高度。

5.如权利要求1所述的方法，其特征在于，所述获取输入文本框的内容之后，该方法还包括：

判断输入焦点是否点击在长度提示内容上，如果是，则将输入焦点移至文本框中除长度提示内容外的位置进行显示。

6.如权利要求5所述的方法，其特征在于，所述监听网页中的文本框包括：监听输入事件或属性变化事件是否发生；

所述判断输入焦点是否点击在长度提示内容上包括：监听长度提示内容的点击事件是否发生。

7.一种网页中进行文本框输入的装置，其特征在于，该装置包括文本框监听单元、高度调整单元和显示单元；

所述文本框监听单元，监听网页中的文本框，获取输入文本框的内容，传送给所述显示单元；判断输入后的内容高度是否大于展示框高度，如果是，则向所述高度调整单元发送调整指令；

所述高度调整单元，接收调整指令，将展示框高度与设定高度值进行求和，得到求和值，将展示框高度增加为求和值；并将文本区域高度与设定高度值进行求和，得到求和值，将文本区域高度增加为求和值；向所述显示单元发送显示指令；

所述显示单元，接收来自所述高度调整单元的显示指令，在展示框中显示来自所述文本框监听单元的内容。

8.如权利要求7所述的装置，其特征在于，所述显示单元，还将长度提示内容显示在展示框的最末一行，所述文本框监听单元包括内容监听子单元和覆盖判断子单元；

所述内容监听子单元，监听网页中的文本框，获取输入文本框的内容，传送给所述显示单元和所述覆盖判断子单元；

所述覆盖判断子单元，判断输入的内容是否占用长度提示内容所在行的空间，如果是，则向所述高度调整单元发送调整指令。

9.如权利要求7或8所述的装置，其特征在于，所述文本框监听单元包括内容容量监听子单元，判断文本框中的内容是否为空，如果是，则向所述高度调整单元发送还原指令；

所述高度调整单元，接收来自所述内容容量监听子单元的还原指令，将文本框的展示框高度和内容高度设置为原始展示框高度和原始文本区域高度。

10.如权利要求7或8所述的装置，其特征在于，所述文本框监听单元包括焦点监听子单元，判断输入焦点是否点击在长度提示内容上，如果是，则向所述显示单元发送焦点移动指令；

所述显示单元，接收来自所述焦点监听子单元的焦点移动指令，将输入焦点移至文本框中除长度提示内容外的位置进行显示。

Images