专利名称：界面中输入文本的显示方法及显示输入文本的界面组件的制作方法
技术领域：
本发明属于计算机技术领域，尤其涉及一种界面中输入文本的显示方法及显示输入文本的界面组件。
背景技术：
在界面中配置的多行文本输入框(Textarea)，用户可以在其中输入一段或多段文本。当在多行文本输入框中输入一段或多段文本时，多行文本输入框中的文本只会显示一种默认的字体颜色(例如黑色)，若需要更改多行文本输入框中部分文本的字体颜色，例如将部分文本的字体颜色由黑色更改为红色时，需要用户手工调整文本的字体颜色。因此需要一种可以解决诸如自动将多行文本输入框中输入文本设置为不同格式并显示的解决方案。
发明内容
鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的界面中输入文本的显示方法及显示输入文本的界面组件。依据本发明的一个方面，提供了一种界面中输入文本的显示方法，包括步骤在界面中设置第一文本输入框；在界面中设置第二文本输入框，第二文本输入框布置在第一文本输入框之后，而且使得第二文本输入框的位置和第一文本输入框的位置相对应；在第一文本输入框中接收输入的文本，并以第一预定格式显示所输入的文本；以及在第二文本输入框中以第二预定格式显不在第一文本输入框中输入的文本，使得所输入的文本在第一文本输入框和第二文本输入框中在相同的位置显示，从而使得所输入的文本以第一预定格式和第二预定格式叠加的方式显示。可选地，其中第二预定格式为以第一预定颜色显示用户输入的文本中的前第一预定数量个字符，并以第二预定颜色或以选中状态显示用户输入的文本中的后续字符。可选地，其中第二预定格式为以第一预定颜色显示用户输入的文本中的前第一预定数量个字符，并以空白显示所述用户输入的文本中的后续字符。可选地，其中以第二预定数量将用户输入的文本中的字符从头至尾划分为多个组，所述第二预定格式为以不同的颜色显示每相邻的组中的字符。依据本发明的另一个方面，提供了一种显示输入文本的界面组件，其包括第一文本输入框，接收用户输入的文本，并以第一预定格式在第一文本输入框中显示用户输入的文本；第二文本输入框，布置在第一文本输入框之后且与第一文本输入框的位置相对应，在第二文本输入框中以第二预定格式显示在第一文本输入框中用户输入的文本，且用户输入的文本在第一文本输入框和第二文本输入框中相同的位置显不。可选地，第二文本输入框以第一预定颜色显示用户输入的文本中的前第一预定数量个字符，并以第二预定颜色或以选中状态显示用户输入的文本中的后续字符。可选地，第二文本输入框以第一预定颜色显示用户输入的文本中的前第一预定数量个字符，并以空白显示所述用户输入的文本中的后续字符。可选地，第二文本输入框以第二预定数量将用户输入的文本中的字符从头至尾划分为多个组，第二预定格式为以不同的颜色显示每相邻的组中的字符。根据本发明的界面中输入文本的显示方法及显示输入文本的界面组件，通过在界面中设置第一文本输入框和第二文本输入框，第二文本输入框布置在第一文本输入框之后，而且使得第二文本输入框的位置和第一文本输入框的位置相对应，得所输入的文本在第一文本输入框和第二文本输入框中在相同的位置叠加显示，从而使得在界面中所显示文本输入框中的文本能够自动地按照不同格式显示，解决文本输入框中输入文本不能自动按照不同格式显示的问题，可以向用户呈现更为友好的界面。上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的
具体实施方式
。
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的附图标记表示相同的部件。在附图中图I示出了根据本发明的一个实施例的界面中输入文本的显示方法的流程图；图2示出了根据本发明的一个实施例中所输入的文本以在第一文本输入框中的第一预定格式和在第二文本输入框中的第二预定格式叠加的方式显示的示意图；以及图3示出了根据本发明的一个实施例的显示输入文本的界面组件的方框示意图。
具体实施例方式下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。当用户在文本框中输入一段或多段文本时，文本输入框中的一段或多段文本只会显示一种默认的字体颜色(例如黑色)，但是，在某些情况下用户可能会需要以多种字体颜色区分显示不同部分的文本,例如，自动将文本输入框中超过最大允许字符数的文本部分显示成红色(或其他颜色)。或者，终端用户在文本输入框编辑短信时，文本输入框中的每70个字符会显示一种颜色，也就是以70个字符为单位，将文本输入框中的文本划分为多个部分，每个部分显示不同的颜色，以让用户很清晰地知道当前编辑的短信需要花多少钱。然而，现有的文本输入框并不具有自动将文本输入框中输入文本设置为不同格式并显示的功倉泛。为此，本发明提出一种界面中输入文本的显示方法和一种显示输入文本的界面组件。为了说明方便，在下面的描述中，设显示界面的平面为XY平面，第一文本输入框和第二文本输入框在界面中的层叠方向设为界面的Z轴方向，例如界面可以是网页界面或短信编辑界面。
本发明提出的在界面中输入文本的显示方法主要是，在界面的Z轴方向上，在第一文本输入框的下方添加第二文本输入框，通过第一文本输入框接收输入的文本，所输入的文本在第一文本输入框和第二文本输入框中在相同的位置显示，从而使得所输入的文本以在第一文本输入框中的第一预定格式和在第二文本输入框中的第二预定格式叠加的方式显示。下面结合图I具体说明根据本发明一个实施例的、适于解决上述问题的界面中输入文本的显示方法100的流程图。如图I所示，本发明的界面中输入文本的显示方法100始于步骤S110，在步骤SllO中，在界面中设置第一文本输入框。该第一文本输入框可以是一种可移动、可调大小的文本或图形容器。根据本发明的一个实施例，第一文本输入框可以是多行文本输入框。随后，在步骤S120中，在界面中设置第二文本输入框，第二文本输入框布置在第一文本输入框之后，而且使得第二文本输入框的位置和第一文本输入框的位置相对应。该第二文本输入框可以是一种可移动、可调大小的文本或图形容器。根据本发明的一个实施例，第二文本输入框可以是多行文本输入框。 具体而言，为了提高界面中文本输入框的显示效果，将与第一文本输入框有关的在界面的XY平面中显示的位置和大小等的属性复制给第二文本输入框，使得第二文本输入框和第一文本输入框在界面的XY平面中显示的位置和大小一致。另外为了恰当显示，需要将第一文本输入框在界面的Z轴方向上设置为位于第二文本输入框的上方。根据本发明的一个示例，定义的第一文本输入框和第二文本输入框在界面的Z轴方向上显示的层叠顺序的属性值可以利用界面属性参数z-index来设置；z_index值越高,对象在界面的Z轴方向上就越显示在上方；z_index值越低,对象在界面的Z轴方向上就越显示在下方。当然，本发明不受限于界面属性参数z-index，所有可以定义文本输入框在界面中显示的层叠顺序的界面属性都在本发明的保护范围之内。以上述界面支持IE浏览器，以第一文本输入框和第二文本输入框为多行文本输入框为例，在步骤SllO中，在界面中设置多行文本输入框textEl(相当于第一文本输入框)。然后，在步骤S120中，在界面中设置多行文本输入框bgEl (相当于第二文本输入框)，使该多行文本输入框bgEl的样式被设置得与多行文本输入框textEl的样式相同，而多行文本输入框bgEl的样式可以只需保留多行文本输入框textEl的属性参数宽度“width”和高度“height”即可，具体可以由如下代码表示//定义多行文本输入框textEl和多行文本输入框bgEl Dom.ready(function() { var textEl = g('msgr)， bgEl = g('bgTextarea');
}
//在多行文本输入框textEl中最大允许字数为50个字符，超过50个符字时，超出部分的字体颜色设置为红色function shadovv() {
var valueStr=textEl .value,
sub S = YalueStr.substr(0,50); bgEl.innerText = subS.replac.e(Λl·/ig，,',')；
var IiighLigluEl — docutnent.createEleineiil('<fonl co!or-"red">
</font:>');
bgEl.appendChild(highLightEl);
h i gh LiglitE I. i nnerT ex t = valueStr.substr(subS. length).rep!ace(/([\r\n])$/$l ').replace(/\r/ig，””)；
}
//多行文本输入框textEl以及多行文本输入框textEl中的字体的透明
度可设置为0.2
if(Browser, ie && textEl) {
W(bgEl).show();
W(textEi).css('opacity\0.2)
.addE￥entListener('propenycha!ige'.shadow).fire(
'propertychange')
.addEventListener('sciO!r,sciO!l).ilre('scrol]') .addEventListcner('sclcctionchange',scroll);
}； //多行文本输入框texffil中输入文本的字体大小设置为10磅</scr I pt> </head><body>
<div style="font-size: I Opt;"><br/><hr/x/div>
//多行输入文本框bgEl的滚动条随着多行输入文本框textEl的滚动条
变化
function scroll(){
bgEl.scrollTop = textEi.scrollTop;
}
//多行文本输入框bgEl的样式被设置得与多行文本输入框textEl的样式相同，多行文本输入框bgEl设置在多行文本输入框textEl的下方
<textarea id="bLrTextarea"
sty!e="width:300px;height: 100px;!ine-height:20px;position:absolute;z-index:-1 ;dispiay:none;" rows="!" cois="20" tabindex="-1 "></textarea>
〈textarea id="msg"
//在多行文本输入框textEl中输入“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数,柔情似水佳期如梦忍顾鹊桥归路两情若是久长时又&在朝朝暮暮”
sly !e=" w idih :300px Jieight: I ()0px;line-heighi.:20i)x；})osition:absolu1e"
iows="1" cols="20"Mf云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却
人间无数，柔情似水佳期如梦忍顾鹤桥归路两情若是久长时又&在朝朝暮暮</textarea>上述代码是以界面支持IE浏览器为例描述的，当然可以理解的是，对于chrome与firefox等浏览器,虽然在chrome与firefox等浏览器的代码中不能添加〈font〉标签,但也可对上述代码进行调整,例如在多行文本输入框bgEl中将多行文本输入框textEl中超过最大允许字符数的文本部分替换成预定字符(例如替换成等宽的空格)，也能使得通过将所输入的文本以在多行文本输入框textEL中的第一预定格式和在多行文本输入框bgEl中的第二预定格式叠加的方式显示，以显示出多行文本输入框textEl中在最大允许字符数以内的文本部分。随后，在步骤S130中，在第一文本输入框中接收输入的文本，并以第一预定格式显示所输入的文本。在本发明的一个实施例中第一预定格式为部分透明，例如第一预定格 式是指文本的透明度(Alpha)为O. 2的格式(透明度的范围(Γ225)，此时第一文本输入框中接收到的文本，会以透明度为O. 2的格式在第一文本输入框中显示。通过将第一文本输入框中显不的文本格式设置为第一预定格式，使得第一文本输入框中的文本与第二文本输入框中以第二预定格式显示的文本能够区分开，当然可以理解的是，所有可以用于设置第一文本输入框中文本的格式的相关参数都在本发明的保护范围之内随后，在步骤S140中，在第二文本输入框中以第二预定格式显示在第一文本输入框中输入的文本，使得所输入的文本在第一和第二文本输入框中在相同的位置显示，从而使得所输入的文本以第一预定格式和第二预定格式叠加的方式显示。在本发明的一个实施例中，第二预定格式为以第一预定颜色显示用户输入的文本中的前第一预定数量个字符，并以第二预定颜色显示用户输入的文本中的后续字符。例如，第一预定格式可设置为部分透明，第一预定颜色可设置为黑色，第二预定颜色为红色，第一预定数量个字符可设置为50个字符，在步骤S130中第一文本输入框接收到以下文本(共计57个字符)“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时又岂在朝朝暮暮”，并将上述文本在第一文本输入框中按照部分透明的格式显示，随后在步骤S140中，在第二文本输入框中以黑色字体显示上述文本中的前50个字符“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时”，超出前50个字符的文本部分“又岂在朝朝暮暮”以红色字体显示，然后将第一文本输入框中的文本和第二文本输入框中的文本叠加显示。虽然在界面的Z轴方向上第二文本输入框设置在第一文本输入框之下，但由于第一文本输入框和第二文本输入框在界面的XY平面中的位置和大小相同，又由于第一文本输入框中的文本显示为部分透明，使得第二文本输入框及其框中的文本的颜色会透过第一文本输入框及其框中的文本而被显示出来，从而在界面上用户看到的在叠加后的文本输入框中的文本其实是第二文本输入框中的文本，也就是在界面上显示“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时”的文本部分的字体颜色为黑色，显示“又岂在朝朝暮暮”的文本部分的字体颜色为红色。由此,实现将第一文本输入框中的输入的文本自动显示成不同的颜色。进一步，可通过调整第一预定数量，使得在第一文本输入框中输入的文本在视觉与效果上能够产生不同颜色的效果，能够实现人性化提示超过预定字数的功能。例如微博(weibo. com)的文本输入框的字符数不允许超过140个字符，通过采用本发明可将文本输入框中超过140个字符的文本部分的字体颜色显示成红色，以提示当前文本输入框内的字符数不符合要求，并将不符合要求的部分以红色字体的方式显示出来。当然可以理解的是，在本发明的实施例中并不具体限定第一预定颜色和第二预定颜色的具体颜色，以及并不限定第一预定数量的具体数值。在本发明的另一个实施例中，第二预定格式为以第一预定颜色显示用户输入的文本中的前第一预定数量个字符，并以选中状态显示用户输入的文本中的后续字符。例如，第一预定格式可设置为部分透明，第一预定颜色可设置为黑色，选中状态可 设置为调灰显示或高亮显示选中部分文本，第一预定数量个字符可设置为50个字符。在步骤S130中，第一文本输入框接收到以下文本(共计57个字符)“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时又岂在朝朝暮暮”，并将上述文本在第一文本输入框中按照部分透明的格式显示，随后在步骤S140中，在第二文本输入框中以黑色字体显示上述文本中的前50个字符“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时”，超出前50个字符的文本部分“又岂在朝朝暮暮”调灰显示或高亮显示。然后将第一文本输入框中的文本和第二文本输入框中的文本叠加显示。虽然界面的Z轴方向上第二文本输入框设置在第一文本输入框之下，但由于第一文本输入框和第二文本输入框在界面的XY平面中的位置和大小相同，又由于第一文本输入框中的文本显示为部分透明，使得第二文本输入框及其框中的文本会部分透过第一文本输入框及及其框中的文本，从而在界面上看到的叠加后的文本其实是第二文本输入框中的文本，也就是在界面上“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时”文本部分显示的字体颜色为黑色，“又岂在朝朝暮暮”文本部分调灰显示或高亮显示。由此，通过采用第一文本输入框，以及与该第一文本输入框对应的第二文本输入框，实现将输入的文本自动显示成不同的颜色。进一步，通过调整第一预定数量，使得在第一文本输入框中输入的文本在视觉与效果上能够产生不同颜色的效果，能够实现人性化提示超过预定字数的功能。例如微博的文本输入框的字符数不允许超过140个字符，通过采用本发明的实施例可将文本输入框中超过140个字符的文本部分进行调灰显示或高亮显示，以提示当前文本输入框内的字符数不符合要求，并将不符合要求的部分以调灰显示或高亮显示方式显示出来。当然，可以理解的是，在本发明的实施例中并不具体限定第一预定颜色的具体颜色、选中状态的显示方式，以及第一预定数量的具体数值。在本发明的又一个实施例中，第二预定格式为以第一预定颜色显示用户输入的文本中的前第一预定数量个字符，并以空白显示用户输入的文本中的后续字符。参见图2，例如，第一预定格式可设置为部分透明，第一预定颜色可设置为黑色，空白显示可以是指用空格代替字符，第一预定数量个字符可设置为50个字符，在步骤S130中，第一文本输入框310接收到以下文本202 (共计57个字符)“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时又岂在朝朝暮暮”，并将上述文本的格式设置为部分透明，随后在步骤S140中，在第二文本输入框320中以黑色字体显示以下文本222 (文本202中前50个字符的文本部分)“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时”，超出50个字符的文本部分“又岂在朝朝暮暮”以等宽的空格替换，也就是用7个空格替换上述超出50个字符的文本部分，所输入的文本在第一文本输入框310和第二文本输入框320中在相同的位置显示，所输入的文本以第一预定格式和第二预定格式叠加的方式显示，最后得到文本242。虽然界面的Z轴方向上第二文本输入框320设置在第一文本输入框310之下,但由于第一文本输入框3102和第二文本输入框320在界面的XY平面中的位置和大小相同(图2中仅仅是为了方便示意，将第一文本输入框20和第二文 本输入框22布置在不同的区域)，在界面上用户会看到叠加后的文本输入框24，又由于第一文本输入框310中的文本202显示为部分透明，在界面上看到叠加后的文本输入框24中会显示叠加后的文本242，也就是在界面上显示“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时”的文本部分的字体颜色为黑色，以及显示“又岂在朝朝暮暮”的文本部分的格式为部分透明(第一文本输入框310中的部分文本)。由此，通过采用第一文本输入框，以及与该第一文本输入框对应的第二文本输入框，来达到让第一文本输入框里的输入的超过最大显示字数的文本部分自动按照空白显示。当然可以理解的是，在本发明的实施例中并不具体限定第一预定颜色的具体颜色，以及并不限定第一预定数量的具体数值。在本发明的又一个实施例中，在步骤S140中，第二文本输入框以第二预定数量将用户输入的文本中的字符从头至尾划分为多个组，第二预定格式为以不同的颜色显示每相邻的组中的字符。例如，第二预定数量为50个字符，第一预定格式可设置为部分透明，不同的颜色可以包括蓝色和红色。在步骤S130中，第一文本输入框310接收到以下文本(共计57个字符)“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时又岂在朝朝暮暮”，并将上述文本的格式设置为部分透明，随后在步骤S140中，在第二文本输入框320中按照每50个字符以蓝色字体和红色字体相间隔的方式显示以下文本(共计57个字符)“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时又岂在朝朝暮暮”，也就是在界面上“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时”的字体颜色显示为蓝色，“又岂在朝朝暮暮”的字体颜色显示为红色，然后将第一文本输入框中的文本和第二文本输入框中的文本叠加显不，虽然在界面的Z轴方向上第二文本输入框设置在第一文本输入框之下,但由于第一文本输入框和第二文本输入框在界面的XY平面中的位置和大小相同，又由于第一文本输入框中的文本显示为部分透明，使得第二文本输入框会部分透过第一文本输入框，在界面上看到的叠加后的文本其实是第二文本输入框中的文本，也就是在界面上“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时”的文本部分的字体颜色显示为蓝色，“又岂在朝朝暮暮”的文本部分的颜色显示为红色。由此，通过采用第一文本输入框，以及与该第一文本输入框对应的第二文本输入框，来达到让输入的文本自动显示成不同的颜色。例如，将第二预定数量设置为70个字符，在编辑手机短信时，短信文本输入框中可将用户输入的文本设置为按照每70个字符以一种颜色显示的方式，由此可以让用户很清晰的知道自己的短信要花多少钱。当然可以理解的是，在本发明的实施例中并不具体限定第二预定数量的具体数值，以及不限定不同的颜色的选取。在步骤S140之后，可以结束本流程。需要说明的是，图I所示的方法并不限定按所示的各步骤的顺序进行，可以根据需要调整各步骤的先后顺序另外，所述步骤也不限定于上述步骤划分，上述步骤可以进一步拆分成更多步骤也可以合并成更少步骤。例如步骤S120中的“在界面中设置第二文本输入框”，可与步骤SllO —起执行，而在S120步骤中设置第一文本输入框和第二文本输入框之间的位置。下面结合图3说明根据本发明一个实施例的、适于解决上述问题的一种显示输入文本的界面组件300。
如图3所示，本发明的显示输入文本的界面组件300包括第一文本输入框310和第二文本输入框320，为了说明方便起见，图3还示出了用户输入设备30。第一文本输入框310接收用户从用户输入设备30输入的文本，并以第一预定格式在第一文本输入框310中显示用户输入的文本；该用户输入设备30可以是用于输入文本的键盘，也可以是用户输入文本的触摸显示屏。在本发明的一个实施例中，第一预定格式为部分透明。可选地，第一文本输入框310包括接收模块312和第一显示模块314。其中接收模块312接收用户从用户输入设备30输入的文本；第一显示模块314以第一预定格式显示用户输入的文本。在界面的Z轴方向上，第二文本输入框320布置在第一文本输入框310之下且与第一文本输入框310的位置相对应,在第二文本输入框320中以第二预定格式显不在第一文本输入框310中的所述用户输入的文本,且用户输入的文本在第一文本输入框310和第二文本输入框320中相同的位置显示。可选地，第二文本输入框320包括获取模块322和第二显示模块324。其中获取模块322获取用户在第一文本输入框310中输入的文本；第二显示模块324以第二预定格式显示所获取的文本。具体而言，为了提高界面中文本输入框的显示效果，将第一文本输入框310有关的在界面的XY平面中显示的位置和大小等的属性复制给第二文本输入框320，使得第二文本输入框320和第一文本输入框310在界面的XY平面中显示的位置和大小一致。另外为了恰当显示，需要将第一文本输入框310在界面的Z轴方向上设置为位于第二文本输入框320的上方。根据本发明的一个不例，定义的第一文本输入框310和第二文本输入框320在界面的Z轴方向上显示的层叠顺序的属性值可以利用界面属性参数z-index来设置；Z-indeX值越高，对象在界面的Z轴方向上就越显示在上方；z-index值越低,对象在界面的Z轴方向上就越显示在下方。当然，本发明不受限于界面属性参数z-index，所有可以定义文本输入框在界面中显示的层叠顺序的界面属性都在本发明的保护范围之内。在本发明的一个实施例中，第二文本输入框320以第一预定颜色显示所述用户输入的文本中的前第一预定数量个字符，并以第二预定颜色或以选中状态显示用户输入的文本中的后续字符。例如，第一预定格式可设置为部分透明，第一预定颜色可设置为黑色，选中状态可设置为选中部分的文本进行调灰显示或高亮显示，第一预定数量个字符可设置为50个字符。第一文本输入框310中的接收模块312接收到以下文本(共计57个字符)“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时又岂在朝朝暮暮”，第一显示模块314将上述文本按照部分透明的格式显示，第二文本输入框320中的获取模块322获取用户在第一文本输入框310中输入的文本,第二文本输入框320中的第二显示模块324以黑色字体显示上述文本中的前50个字符“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时”，超出前50个字符的文本部分“又岂在朝朝暮暮”被调灰显示或高亮显示。然后将第一文本输入框中310的文本和第二文本输入框320中的文本叠加显示，虽然第二文本输入框320设置在第一文本输入框310之后,但由于第一文本输入框310和第二文本输入框320在界面中的位置和大小相同，在界面上用户只会看到叠加后的文本输 入框，又由于第一文本输入框310中的文本显示为部分透明，在界面上看到的文本输入框中会显示叠加后的文本，也就是在界面上“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时”的文本部分的字体颜色为黑色，“又岂在朝朝暮暮”的文本部分调灰显示或高亮显示。由此，通过采用第一文本输入框310,以及与该第一文本输入框310对应的第二文本输入框320,实现将第一文本输入框310里的输入的文本自动显示成不同的颜色。在本发明的另一实施例中，第二文本输入框320以第一预定颜色显示所述用户输入的文本中的前第一预定数量个字符，并以空白显示用户输入的文本中的后续字符。例如，第一预定格式可设置为部分透明，第一预定颜色可设置为黑色，空白显示可以是指用空格代替字符，第一预定数量个字符可设置为50个字符，结合图2，第一文本输入框310中的接收模块312接收到以下文本202 (共计57个字符)“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时又岂在朝朝暮暮”，第一显示模块314以部分透明的格式显示上述文本，第二文本输入框320中的获取模块322获取用户在第一文本输入框310中输入的文本，第二文本输入框320中的第二显示模块324以黑色字体显示以下文本222 (文本202中前50个字符的文本部分)“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时”，超出50个字符的文本部分“又岂在朝朝暮暮”以等宽的空格替换，也就是用7个空格替换上述超出50个字符的文本部分，所输入的文本在第一文本输入框310和第二文本输入框320中在相同的位置显不,所输入的文本以第一文本输入框310中的格式和第二文本输入框320中的格式叠加的方式显示，从而得到文本242。虽然第二文本输入框320设置在第一文本输入框310之后,但由于第一文本输入框310和第二文本输入框320在界面中的位置和大小相同(图2中仅仅是为了方便示意，将第一文本输入框310和第二文本输入框320布置在不同的区域)，在界面上用户只会看到叠加后的文本输入框24和叠加后的文本242，该文本242的显示效果“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时”的文本部分的字体颜色为黑色，“又岂在朝朝暮暮”的文本部分调灰显示或高亮显示。由此，通过采用第一文本输入框310,以及与该第一文本输入框310对应的第二文本输入框320,来达到让第一文本输入框310中的输入的超过最大显示字数的文本部分自动按照空白显示。当然可以理解的是，在本发明的实施例中并不具体限定第一预定颜色的具体颜色，以及并不限定第一预定数量的具体数值。在本发明的又一实施例中，第二文本输入框320以第二预定数量将用户输入的文本中的字符从头至尾划分为多个组，第二预定格式为以不同的颜色显示每相邻的组中的字符。例如，第二预定数量为50个字符，第一预定格式可设置为部分透明，不同的颜色可以包括蓝色和红色。第一文本输入框310中的接收模块312接收到以下文本(共计57个字符)“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时又岂在朝朝暮暮”，第一显示模块314按照部分透明的方式显示上述文本，第二文本输入框320中的获取模块322获取用户在第一文本输入框310中输入的文本，第二显示模块32中按照每50个字符将上述文本划分为两组，第一组的字体颜色为蓝色字体，第二组的字体颜色为红色字体，也就是以蓝色字体和红色字体相间隔的方式显示以下文本(共计57个字符)“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时又岂在朝朝暮暮”，也就是在界面上“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时”的字体颜色显示为蓝色，“又岂在朝朝暮暮”的字体颜色显示为红色，然后将第一文本输入框310中的文本和第二文本输入框320中的文本叠加显示，虽然在界面的Z轴方向上第二文本输入框320设置在第一文本输入框310之后，但由于第一文本输入框310和第二文本输入框320在界面的XY平面中的位置和大小相同，在显示界面上用户只会看到叠加后的文本输入框和显示叠加后的文本，叠加后的文本的显示效果“纤云弄巧飞星传恨银汉迢迢暗渡金风玉露一相逢便胜却人间无数，柔情似水佳期如梦忍顾鹊桥归路两情若是久长时”的文本部分的字体颜色显示为蓝色，“又岂在朝朝暮暮”的文本部分的颜色显示为红色。由此，通过采用第一文本输入框310，以及与该第一文本输入框310对应的第二文本输入框320，来达到让输入的文本自动显示成不同的颜色。例如，将第二预定数量设置为70个字符，在编辑手机短信时，短信文本输入框中可将用户输入的文本设置为按照每70个字符以一种颜色显示的方式，由此可以让用户很清晰的知道自己的·短信要花多少钱。当然可以理解的是，在本发明的实施例中并不具体限定第二预定数量的具体数值，以及不限定不同的颜色的选取。想要特别说明的是，在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。
类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循
具体实施方式
的权利要求书由此明确地并入该
具体实施方式
，其中每个权利要求本身都作为本发明的单独实施例。本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以任意的组合方式来使用。本发明的各个部件实施例可以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微·处理器或者数字信号处理器(DSP )来实现根据本发明实施例中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。
权利要求
1.一种界面中输入文本的显示方法，包括步骤 在界面中设置第一文本输入框； 在所述界面中设置第二文本输入框，所述第二文本输入框布置在所述第一文本输入框之后，而且使得所述第二文本输入框的位置和所述第一文本输入框的位置相对应； 在所述第一文本输入框中接收输入的文本，并以第一预定格式显示所输入的文本；以及 在所述第二文本输入框中以第二预定格式显示在第一文本输入框中输入的文本，使得所输入的文本在第一文本输入框和第二文本输入框中在相同的位置显不，从而使得所输入的文本以第一预定格式和第二预定格式叠加的方式显示。
2.根据权利要求I所述的方法，其中第一文本输入框和第二文本输入框为多行文本输入框。
3.根据权利要求I或2所述的方法，其中第一预定格式为部分透明。
4.根据权利要求Γ3任一所述的方法，其中第二预定格式为以第一预定颜色显示所述用户输入的文本中的前第一预定数量个字符，并以第二预定颜色或以选中状态显示所述用户输入的文本中的后续字符。
5.根据权利要求Γ3中任一个所述的方法，其中第二预定格式为以第一预定颜色显示所述用户输入的文本中的前第一预定数量个字符，并以空白显示所述用户输入的文本中的后续字符。
6.根据权利要求Γ3中任一个所述的方法，其中以第二预定数量将所述用户输入的文本中的字符从头至尾划分为多个组，所述第二预定格式为以不同的颜色显示每相邻的组中的字符。
7.—种显示输入文本的界面组件，其包括 第一文本输入框，接收用户输入的文本，并以第一预定格式在第一文本输入框中显不所述用户输入的文本； 第二文本输入框，布置在第一文本输入框之后且与第一文本输入框的位置相对应，在第二文本输入框中以第二预定格式显示在第一文本输入框中所述用户输入的文本，且所述用户输入的文本在第一文本输入框和第二文本输入框中相同的位置显不。
8.根据权利要求7所述的界面组件，其中，第一和第二文本输入框为多行文本输入框。
9.根据权利要求7或8所述的界面组件，其中，第一预定格式为部分透明。
10.根据权利要求疒9中任一个所述的界面组件，其中， 所述第二文本输入框以第一预定颜色显示所述用户输入的文本中的前第一预定数量个字符，并以第二预定颜色或以选中状态显示所述用户输入的文本中的后续字符。
11.根据权利要求疒9中任一个所述的界面组件，其中， 所述第二文本输入框以第一预定颜色显示所述用户输入的文本中的前第一预定数量个字符，并以空白显示所述用户输入的文本中的后续字符。
12.根据权利要求7、中任一个所述的界面组件，其中， 所述第二文本输入框以第二预定数量将所述用户输入的文本中的字符从头至尾划分为多个组，所述第二预定格式为以不同的颜色显示每相邻的组中的字符。
13.根据权利要求疒12中任一个所述的界面组件，其中，所述第一文本输入框包括接收模块，其接收用户输入的文本；第一显示模块，其以第一预定格式显示用户输入的文本。
14.根据权利要求疒13中任一个所述的界面组件，其中，所述第二文本输入框包括获取模块，获取用户在第一文本输入框中输入的文本；第二显示模块，以第二预定格式显示所获取的文本。
全文摘要
本发明提供一种界面中输入文本的显示方法及显示输入文本的界面组件。该显示方法包括在界面中设置第一文本输入框；在界面中设置第二文本输入框，第二文本输入框布置在第一文本输入框之后，而且使得第二文本输入框的位置和第一文本输入框的位置相对应；在第一文本输入框中接收输入的文本，并以第一预定格式显示所输入的文本；以及在第二文本输入框中以第二预定格式显示在第一文本输入框中输入的文本，使得所输入的文本在第一文本输入框和第二文本输入框中在相同的位置显示，从而使得所输入的文本以第一预定格式和第二预定格式叠加的方式显示。本发明可以解决文本输入框中输入文本不能自动按照不同格式显示的问题，可以向用户呈现更为友好的界面。
文档编号G06F3/0489GK102937881SQ20121050781
公开日2013年2月20日 申请日期2012年11月30日 优先权日2012年11月30日
发明者应加宽 申请人:北京奇虎科技有限公司, 奇智软件(北京)有限公司