应用于浏览器的文本输入框显示方法和装置的制造方法

文档序号:9765737阅读:533来源:国知局
应用于浏览器的文本输入框显示方法和装置的制造方法
【技术领域】
[0001]本发明属于计算机技术领域,尤其涉及一种应用于浏览器的文本输入框显示方法和装置。
【背景技术】
[0002]html5为input元素新增了一个属性“placeholder”,提供对输入字段预期值的提示信息。如图1所示,当input为空且未获得焦点时,所述提示信息显示。如图2所示,当input获得焦点时,所述提示信息消失。
[0003]虽然,目前大部分浏览器都对placeholder属性提供了支持,但如IE6?IE9等浏览器却不支持placeholder属性,在这些不支持原生placeholder属性的浏览器下,通常使用value值来模拟placeholder属性。S卩,如果input为空且未获得焦点,就把value值设置为placeholder属性的值,一旦获得焦点,则将该input的值清空。这种方式在一些情况下会有问题,比如type =“password”的input的value值是以星号显示的,无法直接显示文字,除非同时更改type类型。再如,会给表单验证带来麻烦,如果某input是必填的,那么提交表单的时候该input的value为空或者为placeholder值时都不应该被提交,所以我们要增加对value为placeholder的判断,不过如果项目里使用了验证插件,而插件本身又不支持这种方式,还是会带来些麻烦的。

【发明内容】

[0004]本发明的目的在于提供一种应用于浏览器的文本输入框显示方法和装置,旨在解决现有技术中的上述技术问题。
[0005]为解决上述技术问题,本发明实施例提供以下技术方案:
[0006]一种应用于浏览器的数据处理方法,所述浏览器包括用于输入文本的输入框,所述方法包括以下步骤:
[0007]创建标签,其中,所述标签覆盖于所述输入框上,且所述标签的文本内容为对所述输入框需输入字段预期值的提示信息;
[0008]判断当前浏览器是否支持占位符placeholder属性;
[0009]若当前浏览器不支持placeholder属性,则监听所述输入框的输入input事件;
[0010]若监听到所述输入框的input事件,则判断所述输入框的值是否为空;
[0011]如果输入框的值为空,则显示所述标签;
[0012]如果输入框的值不为空,则隐藏所述标签。
[0013]一种应用于浏览器的数据处理装置,所述浏览器包括用于输入文本的输入框,所述装置包括:
[0014]创建单元,用于创建标签,其中,所述标签覆盖于所述输入框上,且所述标签的文本内容为对所述输入框需输入字段预期值的提示信息;
[0015]第一判断单元,用于判断当前浏览器是否支持占位符placeholder属性;
[0016]监听单元,用于若当前浏览器不支持placeholder属性,则监听所述输入框的输入input事件;
[0017]第二判断单元,用于若监听到所述输入框的input事件,则判断所述输入框的值是否为空;
[0018]显示单元,用于如果输入框的值为空,则显示所述标签;
[0019]隐藏单元,用于如果输入框的值不为空,则隐藏所述标签。
[0020]本发明实施例提供的应用于浏览器的文本输入框显示方法,提供了一种插入一个覆盖在input上的标签(label标签)来模拟placeholder的方式,相比较现有利用输入框的value值来模拟placeholder提示信息的方法,本实施例的方法可避免在提交表单的时候将placeholder的属性值当做输入框的value值来提交,从而实现了在不影响输入框实际功能的情况下模拟了 placeholder属性。
【附图说明】
[0021]图1是本发明现有的应用于浏览器的文本输入框示意图;
[0022]图2是本发明第一实施例中应用于浏览器的文本输入框显示方法的流程示意图;
[0023]图3为本发明第二实施例中应用于浏览器的文本输入框显示方法的流程示意图;
[0024]图4是本发明第三实施例中应用于浏览器的文本输入框显示装置的流程示意图;
[0025]图5是本发明第四实施例中应用于浏览器的文本输入框显示装置的结构示意图。
【具体实施方式】
[0026]请参照图式,其中相同的组件符号代表相同的组件,本发明的原理是以实施在一适当的运算环境中来举例说明。以下的说明是基于所例示的本发明具体实施例,其不应被视为限制本发明未在此详述的其它具体实施例。
[0027]在以下的说明中,本发明的具体实施例将参考由一部或多部计算机所执行之作业的步骤及符号来说明,除非另有述明。因此,其将可了解到这些步骤及操作,其中有数次提到为由计算机执行,包括了由代表了以一结构化型式中的数据之电子信号的计算机处理单元所操纵。此操纵转换该数据或将其维持在该计算机之内存系统中的位置处,其可重新配置或另外以本领域技术人员所熟知的方式来改变该计算机之运作。该数据所维持的数据结构为该内存之实体位置,其具有由该数据格式所定义的特定特性。但是,本发明原理以上述文字来说明,其并不代表为一种限制,本领域技术人员将可了解到以下所述的多种步骤及操作亦可实施在硬件当中。
[0028]本发明的原理使用许多其它泛用性或特定目的运算、通信环境或组态来进行作业。所熟知适合用于本发明的运算系统、环境与组态的范例可包括(但不限于)行动电话、个人计算机、服务器、多处理器系统、微电脑为主的系统、主架构型计算机、及分布式运算环境,其中包括了任何的上述系统或装置。
[0029]如在此处使用的术语「模块」或「单元」可称之为在该运算系统上执行的软件对象或例式。在此处所述之不同组件、模块、引擎及服务可实施为在该运算系统上执行之对象或处理。而在此处所述的系统及方法优选地是实施成软件,在软件及硬件或硬件上之实施亦有可能并进行考虑。
[0030]请参阅图2,图2为本发明第一实施例中应用于浏览器的文本输入框显示方法的流程示意图,其中所述浏览器包括用于输入文本的输入框。
[0031]所述应用于浏览器的文本输入框显示方法包括以下步骤:
[0032]步骤SI 10,创建标签(即label标签),其中,所述标签覆盖于所述输入框上,且所述标签的文本内容为对所述输入框需输入字段预期值的提示信息。
[0033]具体的,标签为input元素定义标注(标记),label元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果用户在label元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
[0034]其中,所述输入字段预期值的提示信息可以为“请输入手机号”、“请输入QQ号”及“支持QQ号/油箱/手机号登录”等用于提示用户在所述输入框输入正确文本的提示语。
[0035]步骤S120,判断当前浏览器是否支持占位符placeholder属性。
[0036]步骤S130,若当前浏览器不支持placeholder属性,则监听所述输入框的输入input事件。
[0037]步骤S140,若监听到所述输入框的input事件,则判断所述输入框的值是否为空。
[0038]步骤S150,如果输入框的值为空,则显示所述标签。
[0039]步骤S160,如果输入框的值不为空,则隐藏所述标签。
[0040]上述用于浏览器的文本输入框显示方法,提供了一种插入一个覆盖在input上的la
当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1