CN113138704B

CN113138704B - 一种文本框的显示方法及终端

Info

Publication number: CN113138704B
Application number: CN202010058262.9A
Authority: CN
Inventors: 刘德建; 陈圆治; 郭玉湖; 陈宏�
Original assignee: Fujian Tianquan Educational Technology Ltd
Current assignee: Fujian Tianquan Educational Technology Ltd
Priority date: 2020-01-19
Filing date: 2020-01-19
Publication date: 2022-07-05
Anticipated expiration: 2040-01-19
Also published as: CN113138704A

Abstract

本发明显示了一种文本框的显示方法及终端，通过创建第一文本框以及与所述第一文本框对应的隐藏的第二文本框，将第一文本框的滚动条隐藏，接收针对所述第一文本框的操作，根据所述操作通过所述第二文本框确定第一文本框中光标所在的页数，根据所述页数对所述第一文本框进行跳转页，实现在一个文本框中对文本框中的内容进行分页展示，用分页形式代替原有的滚动条形式，真实模拟了现实书页的场景，方便用户操作，提高用户体验，并且能在接收对文本框的输入、删除、跳转等操作时保持分页显示的效果。

Description

一种文本框的显示方法及终端

技术领域

本发明涉及文本框设计领域，尤其是一种文本框的显示方法及终端。

背景技术

目前的网页开发中，通常使用textarea标签实现文本框对象，textarea标签定义的文本框中默认可以容纳无限数量的文本，开发者也可以根据需要设定最大字符数、显示的列数和行数，但是textarea标签所实现的文本框只能单页展示内容，若输入的数据过多超过了显示的行数，将会用滚动条的形式对内容进行显示，用户操作不方便，影响用户体验。

发明内容

本发明所要解决的技术问题是：提供一种文本框的显示方法及终端，能够通过分页形式显示文本框，方便用户操作，提高用户体验。

为了解决上述技术问题，本发明采用的一种技术方案为：

一种文本框的显示方法，包括步骤：

S1、创建第一文本框以及与所述第一文本框对应的隐藏的第二文本框；

S2、接收针对所述第一文本框的操作，根据所述操作通过所述第二文本框确定第一文本框中光标所在的页数；

S3、根据所述页数对所述第一文本框进行跳转页。

为了解决上述技术问题，本发明采用的另一种技术方案为：

一种文本框的显示终端，包括存储器，处理器及存储在存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

S3、根据所述页数对所述第一文本框进行跳转页。

本发明的有益效果在于：创建与第一文本框对应的隐藏的第二文本框，根据对第一文本框的操作通过第二文本框确定第一文本框中光标所在的页数，实现对第一文本框的跳转页，通过增设与用户操作的第一文本框对应的隐藏的第二文本框实现对第一文本框的分页，通过分页形式代替现有的滚动条形式显示文本框，实现了文本框的分页功能，真实模拟了现实书页的场景，方便用户操作，提高用户体验。

附图说明

图1为本发明实施例的一种文本框的显示方法的步骤流程图；

图2为本发明实施例的一种文本框的显示终端的结构示意图；

图3为本发明实施例的一种文本框的分页显示的页面示意图；

标号说明：

1、一种文本框的显示终端；2、处理器；3、存储器；

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

请参照图1，一种文本框的显示方法，包括步骤：

S3、根据所述页数对所述第一文本框进行跳转页。

从上述描述可知，本发明的有益效果在于：创建与第一文本框对应的隐藏的第二文本框，根据对第一文本框的操作通过第二文本框确定第一文本框中光标所在的页数，实现对第一文本框的跳转页，通过增设与用户操作的第一文本框对应的隐藏的第二文本框实现对第一文本框的分页，通过分页形式代替现有的滚动条形式显示文本框，实现了文本框的分页功能，真实模拟了现实书页的场景，方便用户操作，提高用户体验。

进一步的，所述第一文本框的滚动条不显示且每页具有预设的显示行数；

所述第二文本框的高度随内容的变化而变化，且所述第二文本框的宽和行高与所述第一文本框的宽和行高存在对应关系。

由上述描述可知，将第一文本框的滚动条隐藏，让翻页的显示效果更加逼真，建立的第二文本框的宽和行高与第一文本框存在对应关系，方便通过光标在第二文本框中的相应位置计算其在第一文本框中的对应位置，实现分页显示，也使第一文本框和第二文本框的相应设置更加灵活。

进一步的，所述步骤S2中根据所述操作通过所述第二文本框确定第一文本框中光标所在的页数具体为：

根据所述操作确定光标在所述第一文本框中所在的位置；

将所述第一文本框中的开头至光标位置的内容复制给所述第二文本框；

将所述第二文本框的高度除以其行高，根据所述第二文本框和第一文本框宽和行高的对应关系，得到此时光标在第一文本框中所在的行数；

将所述光标所在的行数除以所述第一文本框每页的预设显示行数，向上取整作为光标所在的页数。

由上述描述可知，第二文本框的高度能够随着复制到其上的内容的多少而动态改变，所以借助第二文本框，根据第二文本框的行高、其与第一文本框的对应关系以及第一文本框中每页的显示行数，能够换算出当前光标所在的第一文本框中的页数，不仅方便快速，而且准确可靠。

进一步的，所述S3包括：

判断是否存在第一临时行，若是，将所述第一临时行删除；

将每页的预设显示行数减去将所述光标所在的行数除以所述第一文本框每页的预设显示行数的余数，得到第二临时行的行数；

在所述第一文本框的末尾添加所述行数的第二临时行；

根据所述页数对所述第一文本框显示的页面数进行更新，同时根据所述操作类型以及每页的预设显示行数更新所述光标在所述第一文本框当前页面的显示位置。

由上述描述可知，若对第一文本框进行相应操作之后，显示的内容不是整数页，则通过添加临时行的方式确保内容显示完整，由于当用户输入时达到当前页最后一个字符，或在当前页的最后一行进行回车换行时，需要在文本框的末尾增加临时行才能保证所有内容计算后增加一页，并且由于用户在执行输入操作时输入内容长短和输入位置的不确定性，每次输入时将第一文本框末尾的临时行删除能保证计算的准确性。

进一步的，所述针对所述第一文本框的操作包括：

输入操作、添加页操作、删除页操作或者跳转页操作。

由上述描述可知，针对第一文本框的操作包括输入、添加页、删除页、跳转页等，用户可操作性强、灵活度高，既可以实现自动分页，也可以实现手动分页，保证用户在对第一文本框进行相应操作时第一文本框都能进行正常分页显示，给用户更好的使用体验感。

请参照图2，一种文本框的显示终端，包括存储器，处理器及存储在存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

S3、根据所述页数对所述第一文本框进行跳转页。

根据所述操作确定光标在所述第一文本框中所在的位置；

进一步的，所述S3包括：

判断是否存在第一临时行，若是，将所述第一临时行删除；

在所述第一文本框的末尾添加所述行数的第二临时行；

进一步的，所述针对所述第一文本框的操作包括：

输入操作、添加页操作、删除页操作或者跳转页操作。

请参照图1，本发明的实施例一为：

一种文本框的显示方法，具体包括：

所述第一文本框的滚动条不显示且每页具有预设的显示行数；

其中，预设的显示行数可以根据需要进行改变；

可以设置一个输入接口，用户可以通过该输入接口设置其想要显示的每页的行数；

所述第二文本框的高度随内容的变化而变化，且所述第二文本框的宽和行高与所述第一文本框的宽和行高存在对应关系；

优选的，所述第二文本框的宽和行高与第一文本框的相同；

其中，根据所述操作通过所述第二文本框确定第一文本框中光标所在的页数具体为：

根据所述操作确定光标在所述第一文本框中所在的位置；

将所述光标所在的行数除以所述第一文本框每页的预设显示行数，向上取整作为光标所在的页数；

每次计算之后清空第二文本框中的内容；

S3、根据所述页数对所述第一文本框进行跳转页；

根据所述页数对所述第一文本框显示的页面数进行更新，同时根据所述操作类型以及每页的预设显示行数更新所述光标在所述第一文本框当前页面的显示位置；

其中，更新所述光标在所述第一文本框当前页面的显示位置具体为：

根据S2中计算得到的光标在第一文本框中所处的行数，将所述行数除以第一文本框预设的显示行数，向上取整即为光标所在页数，余数即为光标所处行数；

将第一文本框中的滚动条位置置顶；

将计算得到的光标在第一文本框中所在的页数减一，与第一文本框的行高和预设显示行数相乘，得到第一文本框的滚动条应该滚动的距离，将滚动条滚动相应距离，光标所处位置即为计算得到的所述光标所在页数和行数；

如第一文本框的行高为1pt(磅)，宽为15pt，第二文本框的行高为1pt，宽为15pt，第一文本框的预设显示行数为5，假设所述第一文本框接收相应操作后，将第一文本框中开头至光标位置的内容复制给第二文本框后得到的第二文本框高度为24pt，与第二文本框的行高相除得到所述第二文本框中光标所在行数为24，第一文本框与第二文本框的宽比值为1:1，计算出第一文本框中光标所在行数也为24，将所述第一文本框中光标所在行数24与第一文本框的预设显示行数5相除，向上取整得到第一文本框中光标所在页数5，余数4即为光标所在行数，将第一文本框中滚动条置顶，将计算得到的光标在第一文本框中所在的页数5减一，与第一文本框的行高值1和预设显示行数5相乘，得到第一文本框的滚动条应该滚动的距离20pt，将所述滚动条滚动相应距离，得到光标的位置在第五页的第四行。

本发明的实施例二为：

一种文本框的显示方法，与实施例一的不同之处在于：

所述S3还包括：

判断是否存在第一临时行，若是，将所述第一临时行删除；

在所述第一文本框的末尾添加所述行数的第二临时行；

如第一文本框的预设显示行数为5，在用户对文本框进行操作后，计算当前的实际有效内容(删除第一临时行之后的内容)共16行即3页1行，那么需要在第一文本框末尾添加4个临时行，达到第四个整页的整页显示效果，保证第三页跳转到第四页时的正常分页显示。

本发明的实施例三为：

一种文本框的显示方法，与实施例一或二的不同之处在于：

针对所述第一文本框的操作包括：

输入操作、添加页操作、删除页操作或者跳转页操作；

具体的：

输入操作：

所述输入操作包括在每页中间插入内容以及在页面末尾插入内容；

此时，步骤S2具体为：

S2、接收针对所述第一文本框的输入操作，根据所述输入操作通过所述第二文本框确定第一文本框中光标所在的页数；

其中，根据所述输入操作通过所述第二文本框确定第一文本框中光标所在的页数具体为：

根据所述输入操作确定光标在所述第一文本框中所在的位置，即输入结束时光标在所述第一文本框中的所处位置；

每次计算之后清空第二文本框中的内容；

优选的，插入内容可能使总页数改变，还可以进一步计算出第一文本框中全部内容的总页数：

将第一文本框中所有内容复制给第二文本框，将所述第二文本框的高度除以行高，根据所述第二文本框和第一文本框宽和行高的对应关系，得到此时第一文本框的内容在第一文本框中显示的总行数，将所述总行数除以所述第一文本框每页的预设显示行数，向上取整为第一文本框中内容的总页数；

添加页操作：

用户输入需添加的页数或添加页数后的总页数；

接收输入的所述需添加的页数，或直接接收所述添加页数后的总页数，并计算其和现有总页数的差值即需添加的页数；

将每页的预设显示行数与所述差值相乘，得到第三临时行的行数；

在所述第一文本框的末尾添加所述行数的第三临时行；

删除页操作：

此时，步骤S2具体为：

S2、接收针对所述第一文本框的删除页操作，根据所述删除页操作通过所述第二文本框确定第一文本框中光标所在的页数；

其中，删除页操作包括删除整页和删除部分行；

其中，所述对第一文本框的删除页操作具体为：

记录第一文本框中被选中某一页面的光标开始位置和结束位置；

在第一文本框中删除光标开始位置到结束位置之间的内容；

优选的，可以设置相应删除页按钮，若在第一文本框显示一页面时点击删除按钮，则自动将光标开始位置和结束位置置于所述一页面的开始位置和结束位置，并删除光标开始位置到结束位置之间的内容即所述一页面的内容；

其中，根据所述删除页操作通过所述第二文本框确定第一文本框中光标所在的页数具体为：

根据所述删除页操作确定光标在所述第一文本框中所在的位置，即删除页操作完毕时光标在所述第一文本框中的所处位置；

将所述删除页操作完毕的第一文本框中的开头至光标位置的内容复制给所述第二文本框；

将所述光标所在的行数除以所述第一文本框每页的预设显示行数，向上取整作为光标所在的页数，余数即为光标在该页数所处的行数；

每次计算之后清空第二文本框中的内容；

若为删除整页操作，则将第一文本框中的总页数减一，若为删除部分行操作，则用所述删除的部分行行数除以第一文本框预设的显示行数，向下取整得到总页数减少值，将总页数减去所述总页数减少值得到现有总页数；

跳转页操作：

接收输入的需跳转页面，将当前显示页面值与需跳转到的页面值相减，得到差值；

将所述差值的绝对值与第一文本框的行高和预设的显示行数相乘，得到滚动条应该滚动的距离；

若所述差值为正数，则将滚动条向前移动所述距离，实现向前翻页，若所述差值为负数，则将滚动条向后移动所述距离，实现向后翻页；

优选的，可以设置翻页按钮，点击翻页按钮后触发向前或向后跳转一页的效果，即将第一文本框的行高和预设的显示行数相乘，得到跳转一页滚动条应该滚动的距离，点击前一页按钮时，滚动条向前移动所述距离，点击后一页按钮时，滚动条向后移动所述距离；

请参见图3，实现从第一页到第二页的跳转页操作；从图中可以看到，在页面底部的中间位置设有显示当前页数以及总页数的控件，并且通过左右的箭头可以实现手动翻转页，通过减号和加号可以实现手动删除页和增加页；

优选的，还包括限制总页数功能：

用户输入预设的最大总页数；

读取所述预设的最大总页数，将所述总页数和第一文本框预设显示行数相乘，得到预设最大总行数；

用户执行输入操作之后，计算此时第一文本框中内容的总行数；

若此时第一文本框中内容的总行数大于所述最大总行数，则将光标置于所述最大总行数所在行的最后一位，并将所述最大总行数所在行最后一位之后的内容删除。

不仅在输入时可以实现在单个文本框中分页显示内容，在添加页、删除页、跳转页时也可以保持对文本框中内容的分页显示，进一步可以设置相应按钮完成对应操作，还可以对文本框的显示总页数进行限制，在文本框中内容达到设置的最大总页数之后就无法继续进行输入，实现对文本框输入内容长度的限制。

请参照图2，本发明的实施例四为：

一种文本框的显示终端1，所述终端1包括处理器2、存储器3及存储在存储器3上并可在所述处理器2上运行的计算机程序，所述处理器2执行所述计算机程序时实现实施例一、实施例二或实施例三中的各个步骤。

综上所述，本发明提供的一种文本框的显示方法及终端，通过设置与第一文本框对应的隐藏的第二文本框，并将第二文本框设置为高度随内容的变化而变化，对第二文本框的大小限制小，在页面布局时更加灵活，借助第二文本框的高度并根据第二文本框和第一文本框的对应关系，实现确认相应光标在第一文本框中的所在页数和行数，并在第一文本框中跳转页面，显示相应内容；获取用户的光标位置作为复制内容的结束点，默认自动向用户展示的即为光标所在的页面，方便用户进行各种操作，给用户提供更好的文本框使用感受，实现用分页形式代替现有的滚动条形式显示文本框中的内容，实现了在一个文本框中的分页，将第一文本框的滚动条隐藏，真实模拟了现实书页的场景，让翻页的显示效果更加逼真，方便用户操作和定位内容，提高用户体验，将用户对第一文本框的相应操作进行细分，根据输入、删除、跳转等具体的操作确定第一文本框中页面跳转的方式及光标在第一文本框中所在的位置，更加准确，若对第一文本框进行相应操作之后，显示的内容不是数个整页，则通过添加临时行的方式确保内容显示完整，保证了对用户操作的容错性，可以设置相应按钮，编写事件实现点击按钮就自动进行相应操作，方便用户的使用，还可以对文本框的显示总页数进行限制，在文本框中内容达到设置的最大总页数之后就无法继续进行输入，实现对文本框输入内容长度的限制。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims

1.一种文本框的显示方法，其特征在于，包括步骤：

S3、根据所述页数对所述第一文本框进行跳转页。

2.根据权利要求1所述的一种文本框的显示方法，其特征在于，所述第一文本框的滚动条不显示且每页具有预设的显示行数；

3.根据权利要求2所述的一种文本框的显示方法，其特征在于，所述步骤S2中根据所述操作通过所述第二文本框确定第一文本框中光标所在的页数具体为：

根据所述操作确定光标在所述第一文本框中所在的位置；

4.根据权利要求3所述的一种文本框的显示方法，其特征在于，所述S3包括：

判断是否存在第一临时行，若是，将所述第一临时行删除；

在所述第一文本框的末尾添加所述行数的第二临时行；

5.根据权利要求1至4中任一项所述的一种文本框的显示方法，其特征在于，所述针对所述第一文本框的操作包括：

输入操作、添加页操作、删除页操作或者跳转页操作。

6.一种文本框的显示终端，包括存储器，处理器及存储在存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现以下步骤：

S3、根据所述页数对所述第一文本框进行跳转页。

7.根据权利要求6所述的一种文本框的显示终端，其特征在于，所述第一文本框的滚动条不显示且每页具有预设的显示行数；

8.根据权利要求7所述的一种文本框的显示终端，其特征在于，所述步骤S2中根据所述操作通过所述第二文本框确定第一文本框中光标所在的页数具体为：

根据所述操作确定光标在所述第一文本框中所在的位置；

9.根据权利要求8所述的一种文本框的显示终端，其特征在于，所述S3包括：

判断是否存在第一临时行，若是，将所述第一临时行删除；

在所述第一文本框的末尾添加所述行数的第二临时行；

10.根据权利要求6至9中任一项所述的一种文本框的显示终端，其特征在于，所述针对所述第一文本框的操作包括：

输入操作、添加页操作、删除页操作或者跳转页操作。