CN109190067B - 浏览器输入框展示方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本发明公开了一种浏览器输入框展示方法，用于解决部分浏览器不支持占位符功能导致输入框无法正常显示的问题。本发明提供的方法包括：在客户端的浏览器加载目标项目后，检测浏览器是否支持占位符功能；若不支持，则当接收到在浏览器上展示输入框的请求时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框；在新的输入框位置上添加预设的行内元素，以将所述新的输入框模拟成带占位符功能的输入框组件，其中，行内元素的样式与采用占位符功能生成的输入框组件的样式一致，行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。本发明还提供浏览器输入框展示装置、计算机设备及存储介质。

Description

浏览器输入框展示方法、装置、计算机设备及存储介质

技术领域

本发明涉及浏览器技术领域，尤其涉及浏览器输入框展示方法、装置、计算机设备及存储介质。

背景技术

不同客户端使用的浏览器可能各不相同，比如有些客户端浏览器采用ie(Internet Explorer)内核，有些客户端浏览器采用Chrome内核；并且，相同内核之间也会存在内核版本的差异，比如ie内核有ie9、ie10、ie11，等等。

目前，当服务器作为数据提供端，比如网页的数据提供端，用户采用客户端浏览器访问服务器，加载服务器上项目的数据时，很多情况下需要加载输入框，即input标签。但是，存在部分浏览器内核无法支持HTML的input placeholder(输入占位符)，即不支持占位符功能，这导致这些客户端浏览器在显示输入框时无法正常展示样式和占位符文本，不方便用户的使用，降低了用户的使用体验。

发明内容

基于此，有必要针对上述技术问题，提供一种可以提高服务器项目对所有浏览器内核版本的兼容性的浏览器输入框展示方法、装置、计算机设备及存储介质。

一种浏览器输入框展示方法，包括：

在客户端的浏览器加载目标项目后，检测所述浏览器是否支持占位符功能；

若所述浏览器不支持占位符功能，则当接收到在所述浏览器上展示输入框的请求时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框；

在所述新的输入框位置上添加预设的行内元素，以将所述新的输入框模拟成带占位符功能的输入框组件，其中，所述行内元素的样式与采用占位符功能生成的输入框组件的样式一致，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。

一种浏览器输入框展示装置，包括：

功能检测模块，用于在客户端的浏览器加载目标项目后，检测所述浏览器是否支持占位符功能；

输入框生成模块，用于若所述功能检测模块的检测结果为否，则当接收到在所述浏览器上展示输入框的请求时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框；

行内元素添加模块，用于在所述新的输入框位置上添加预设的行内元素，以将所述新的输入框模拟成带占位符功能的输入框组件，其中，所述行内元素的样式与采用占位符功能生成的输入框组件的样式一致，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。

一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述浏览器输入框展示方法的步骤。

一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述浏览器输入框展示方法的步骤。

上述浏览器输入框展示方法、装置、计算机设备及存储介质，首先，在客户端的浏览器加载目标项目后，检测所述浏览器是否支持占位符功能；若所述浏览器不支持占位符功能，则当接收到在所述浏览器上展示输入框的请求时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框；然后，在所述新的输入框位置上添加预设的行内元素，以将所述新的输入框模拟成带占位符功能的输入框组件，其中，所述行内元素的样式与采用占位符功能生成的输入框组件的样式一致，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。本发明中，通过对该行内元素进行样式控制，使行内元素的样式与采用占位符功能生成的输入框组件的样式一致、行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致，用户不会感知到输入框的占位符功能无法使用，可以正常显示输入框的样式和占位符文本，使得服务器的项目兼容所有浏览器内核版本的客户端，避免出现输入框显示不正常的情况，提升了用户的使用体验。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一实施例中浏览器输入框展示方法的一应用环境示意图；

图2是本发明一实施例中浏览器输入框展示方法的一流程图；

图3是本发明一实施例中浏览器输入框展示方法步骤S101在一个应用场景下的流程示意图；

图4是QQ程序的登录界面上两个输入框的示意图；

图5是本发明一实施例中浏览器输入框展示方法在一个应用场景下模拟占位符文本效果的流程示意图；

图6是本发明一实施例中浏览器输入框展示方法在另一个应用场景下的流程示意图；

图7是本发明一实施例中浏览器输入框展示方法步骤S402在一个应用场景下的流程示意图；

图8是本发明一实施例中浏览器输入框展示方法在一个应用场景下预先存储得到样式属性历史记录的流程示意图；

图9是本发明一实施例中浏览器输入框展示装置的结构示意图；

图10是本发明一实施例中计算机设备的一示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本申请提供的浏览器输入框展示方法，可应用在如图1的应用环境中，其中，客户端通过网络与服务器进行通信。其中，客户端可以但不限于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备。服务器可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在一实施例中，如图2所示，提供一种浏览器输入框展示方法，以该方法应用在图1中的服务器为例进行说明，包括如下步骤：

S101、在客户端的浏览器加载目标项目后，检测所述浏览器是否支持占位符功能，若是，则执行步骤S102，若否，则执行步骤S103；

当用户使用客户端的浏览器访问服务器，请求加载服务器的目标项目的数据时，该服务器可以在加载目标项目后，对浏览器进行检测，检测该浏览器是否支持占位符功能。特别地，本实施例中，可以通过在目标项目中预先采用代码设置一个自定义组件，该自定义组件在被浏览器加载后，会自动执行检测功能，检测该浏览器是否支持占位符功能。该自定义组件具体可以为一段代码块，这段代码块可以植入至不同的项目中，实现本方法所述的功能，通用型强。在一个应用场景中，该自定义组件是基于Vue.js框架(属于一种前端js框架)开发的，适用所有vue项目，简易代码为：<vue-input-placeholderplaceholder＝”text…”>。

需要说明的是，所述目标项目具体可以是承载在该服务器上的网页内容、APP内容，等。

进一步地，如图3所示，所述步骤S101具体可以包括：

S201、在所述浏览器上新建测试用的输入框；

S202、判断所述测试用的输入框是否带有占位符属性，若是，则执行步骤S203，若否，则执行步骤S204；

S203、确定所述浏览器支持占位符功能；

S204、确定所述浏览器不支持占位符功能。

对于步骤S201，可以理解的是，为了检测该浏览器是否支持占位符功能，可以先尝试浏览器上的占位符功能，若占位符功能能正常使用，则新建的输入框必然会带有占位符属性。因此，可以先在该浏览器上新建一个测试用的输入框。应当知道的是，新建的这个测试用的输入框时，一般是按照该目标项目的需要来建立，比如，若该目标项目当前加载的内容为用户的登录页面，该登录页面上需要显示让用户输入“账户”和“密码”的输入框，那么，步骤S201测试时，可以新建一个“账户”和/或“密码”的输入框作为测试用的输入框。

对于步骤S202，可以理解的是，若该浏览器是支持占位符功能的，那么，新建的测试用的输入框必然带有占位符属性；反之，若该浏览器不支持占位符功能的，那么，新建的测试用的输入框则不会带有占位符属性。因此，可以通过判断新建的测试用的输入框是否带有占位符属性来确定该浏览器是否支持占位符功能。

对于步骤S203，由上述分析可知，如果所述测试用的输入框带有占位符属性，则可以确定所述浏览器支持占位符功能。

对于步骤S204，由上述分析可知，如果所述测试用的输入框不带有占位符属性，则确定所述浏览器不支持占位符功能。

S102、当接收到在所述浏览器上展示输入框的请求时，采用所述占位符功能在所述浏览器的显示页面上生成输入框组件；

可以理解的是，若服务器检测发现该浏览器是支持占位符功能的，那么，当需要在所述浏览器上展示输入框时，比如加载登录页面，可以直接采用原生的占位符功能在该浏览器的显示页面上生成输入框组件。这里所说的输入框组件可以包括输入框本体，以及附属在该输入框本体上的占位符属性，占位符属性可以包括占位符文本、占位符的位置、样式等。

S103、当接收到在所述浏览器上展示输入框的请求时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框；

可以理解的是，若服务器检测发现该浏览器是不支持占位符功能的，这就表示，在该浏览器上无法采用占位符功能，或者采用占位符功能无法得到正常显示的输入框。为了不让客户端的用户察觉这种差异而导致用户体验下降，本实施例在需要在所述浏览器上展示输入框时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框。

需要说明的是，步骤103应当是按照该目标项目的需要来生成该不带占位符功能的新的输入框。比如，若该目标项目当前加载的内容为用户的登录页面，该登录页面上需要显示让用户输入“账户”和“密码”的输入框，那么，步骤103在生成输入框时，需要分别在“账户”输入位置上生成一个不带占位符功能的新的输入框，在“密码”输入位置上生成另一个不带占位符功能的新的输入框。

S104、在所述新的输入框位置上添加预设的行内元素，以将所述新的输入框模拟成带占位符功能的输入框组件，其中，所述行内元素的样式与采用占位符功能生成的输入框组件的样式一致，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。

可以理解的是，在步骤103生成不带占位符功能的新的输入框之后，为了使得该新的输入框可以与采用占位符功能生成的输入框组件在显示效果上一致，本实施例中，在该新的输入框位置上添加预设的行内元素，所述行内元素的样式与采用占位符功能生成的输入框组件的样式一致，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。其中，行内元素是指HTML中的行内元素，由于其不用独占一行的特性，可以与该新的输入框在同一位置上显示，因此可以做到与输入框重叠显示时，模拟上述输入框组件的显示效果。具体地，该行内元素可以是span标签，span标签是可以被用来组合文档中的行内元素之一，由于span没有固定的格式表现，当对它应用样式时，它会产生视觉上的变化，因此可以适用于本实施例提供的浏览器输入框展示方法，对该span标签进行样式控制，即可完成在视觉上对输入框的样式控制。

需要说明的是，本实施例中所说的占位符文本是指输入框未输入内容时，显示在输入框中的信息，常见的是常用灰色显示的提示信息，如图4所示。参见图4中QQ登录界面上的两个输入框，位于上方的输入框为“账号”的输入框，在用户未输入内容时，其上显示的占位符文本为“QQ号码/手机/邮箱”；位于下方的输入框为“密码”的输入框，在用户未输入内容时，其上显示的占位符文本为“密码”。

另外，行内元素的样式是指输入框的呈现形式，其包括突显输入框的框线、花纹、图案等。以QQ登录界面作为举例，位于上方的输入框对应的行内元素的样式可以为“企鹅形阴影图案+下划线+右侧的向下箭头”；位于上方的输入框对应的行内元素的样式可以为“锁形图案+下划线+右侧的键盘图标”。

进一步地，对于采用占位符功能生成的输入框组件，其占位符文本通常具有这样的特性：输入框中没有内容时，显示占位符文本；输入框中有内容时，隐藏占位符文本。因此，为了使得行内元素模拟这种效果，参见图5，在步骤S104之后，所述浏览器输入框展示方法还可以包括：

S301、监听所述新的输入框中的值；

S302、所述新的输入框中有值，则将所述行内元素的内容调整为隐藏状态；

S303、若所述新的输入框中无值，则将所述行内元素的内容调整为显示状态。

对于步骤S301，在步骤S104为新的输入框添加了行内元素后，从显示效果上看，该新的输入框上应该显示有占位符文本，此后，服务器可以监听浏览器上的该新的输入框的值，从而可以得知当该新的输入框中值发生变动时，其上是否还有值，从而根据该新的输入框中值的有无情况来调整行内元素的内容的显隐状态。

对于步骤S302，如果该新的输入框中有值，则表示该输入框中有内容，通常输入框上的内容需要显示出来的，为了不遮挡输入框中显示的内容并且模拟占位符文本的通常特性，可以将所述行内元素的内容调整为隐藏状态。该隐藏状态是指行内元素的内容生成在浏览器的页面上时，不显示，用户无法查看到。与隐藏状态相对的是显示状态，显示状态下的行内元素的内容生成在浏览器的页面上时，按照预设的样式显示在输入框的位置上，用户可以查看到。

进一步地，在步骤S302之前，还可以包括：若所述新的输入框中有值，则获取所述行内元素的内容当前的第一状态，若所述第一状态为隐藏状态，则不调整所述行内元素的内容的状态；若所述第一状态为显示状态，则将所述行内元素的内容调整为隐藏状态。可以理解的是，当监听到新的输入框中有值时，还需要获取并判断该行内元素的内容当前的状态是隐藏状态还是显示状态，如果本来就是隐藏状态，那显然没必要再调整该行内元素的内容的状态；反之，才需要将该行内元素的内容调整为隐藏状态。

对于步骤S303，如果该新的输入框中无值，则表示该输入框中没有内容，在设有行内元素的内容的情况下，为了模拟，占位符文本的通常特性，可以将所述行内元素的内容调整为显示状态。

进一步地，在步骤S303之前，还可以包括：若所述新的输入框中无值，则获取所述行内元素的内容当前的第二状态，若所述第二状态为显示状态，则不调整所述行内元素的内容的状态；若所述第二状态为隐藏状态，则将所述行内元素的内容调整为显示状态。可以理解的是，当监听到新的输入框中无值时，还需要获取并判断该行内元素的内容当前的状态是隐藏状态还是显示状态，如果本来就是显示状态，那显然没必要再调整该行内元素的内容的状态；反之，才需要将该行内元素的内容调整为显示状态。

本实施例执行上述步骤S101～S104，在某种应用场景下会产生新的问题。比如，用户一直使用某个客户端的第一版本的浏览器，第一版本浏览器支持占位符功能，因此加载目标项目后，是采用占位符功能生成输入框组件，该输入框组件的样式由第一版本的浏览器决定；然而，用户后来升级了客户端的浏览器，假设为第二版本的浏览器，该第二版本的浏览器不再支持占位符功能，这就需要采用本方法，在输入框位置上添加行内元素。然而，这里产生的问题是，在第二版本浏览器上添加行内元素显示出来的样式与第一版本浏览器时使用占位符功能得到的样式存在差异，这种支持状态切换后，样式不一致的情况很可能被用户察觉到，不利于用户的使用体验。

进一步地，本实施例针对上述问题，在上述步骤S101-S104的基础上，通过如下步骤解决。如图6所示，在执行步骤S103生成不带占位符功能的新的输入框之前，还可以包括：

S401、判断所述客户端的浏览器上一次加载目标项目时是否支持占位符功能，若否，则执行上述步骤S103，若是，则执行步骤S402；

S402、获取所述客户端的浏览器上一次加载目标项目时采用的占位符样式属性；

S403、当接收到在所述浏览器上展示输入框的请求时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框；

S404、在所述新的输入框位置上添加具有上一次加载目标项目时采用的占位符样式属性的行内元素，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。

对于步骤S401，本方法通过判断客户端的浏览器上一次加载目标项目是是否支持占位符功能来确定该客户端的浏览器是否发生支持状态的切换。这里所说的发生支持状态的切换指的是该客户端的浏览器在上一次加载目标项目时是支持占位符功能的、本次加载目标项目时却不支持占位符功能的情况，本实施例将这种情况称为支持状态的切换。导致支持状态切换的原因可以有多种，常见是的该客户端的浏览器版本改变了，比如版本升级后，由原先支持占位符功能的旧版本升级为不再支持占位符功能的新版本。若没有发生支持状态的切换，则表示客户端的浏览器在上一次加载目标项目时也是不支持占位符功能，当前该客户端的浏览器也不支持占位符功能，这种情况下，占位符的样式前后是相同的，不会被用户察觉到不同，因此执行上述步骤S103即可。

对于步骤402，本实施例中，服务器可以每次与客户端通信时，获取并记录客户端的ID(即唯一标识)、浏览器版本号、每次使用的占位符样式属性和每次加载项目的时间，并存储客户端的ID、浏览器版本号、每次使用的占位符样式属性与加载项目的时间之间的对应关系。从而，当判断得知所述客户端的浏览器上一次加载目标项目时是支持占位符功能的，即发生了支持状态的切换时，服务器可以获取到该客户端的浏览器上一次加载目标项目时采用的占位符样式属性。

需要说明的是，这里所说的占位符样式属性可以包括占位符样式的颜色、字体、字号等。

更进一步地，如图7所示，所述步骤S402具体可以包括：

S501、查询样式属性历史记录，确定所述客户端的浏览器最近一次加载目标项目的加载时间，所述样式属性历史记录记录了所述客户端每次加载项目时的加载时间与所采用的占位符样式属性的对应关系；

S502、根据所述样式属性历史记录获取与确定出的所述加载时间对应的占位符样式属性。

对于步骤S501，本实施例中，可以预先建立好样式属性历史记录，该样式属性历史记录至少记录了所述客户端每次加载项目时的加载时间与所采用的占位符样式属性的对应关系，特别地，还可以具体记录客户端的ID(即唯一标识)、浏览器版本号、每次使用的占位符样式属性和每次加载项目的加载时间之间的对应关系。

对于步骤S502，在确定出最近一次加载目标项目的加载时间之后，根据样式属性历史记录中记录的对应关系，可以直接找出该加载时间下所述客户端的浏览器采用的占位符样式属性。

为便于理解，如图8所示，所述样式属性历史记录可以通过以下步骤预先得到：

S601、在所述客户端的浏览器每次加载项目时成功加载出输入框后，截取加载出的带占位符文本的所述输入框的效果图片；

S602、对所述效果图片进行图像识别，得到所述输入框上占位符样式属性；

S603、获取所述客户端的浏览器本次加载项目的加载时间；

S604、关联存储所述加载时间和得到的所述占位符样式属性，得到所述样式属性历史记录。

对于步骤S601，可以理解的是，每次当某个客户端的浏览器成功加载出输入框后，不论是采用本实施例的方法，还是采用占位符功能，均可显示出带占位符文本的输入框，此时，服务器可以截取加载出的该输入框的效果图片。

对于步骤S602，可以知道的是，通过图像识别技术，可以从效果图片中识别得出输入框上占位符样式的颜色、字体、字号等属性。

对于步骤S603和S604，在获得占位符样式属性后，为了方便服务器后续查找和获取，需要可以获取本次加载项目的加载时间，甚至可以获取本次使用的占位符样式属性对应的客户端ID和浏览器版本号，然后关联存储这些数据，从而得到所述样式属性历史记录。

对于步骤S403，其原理与上述步骤S103类似，此处不再赘述。

对于步骤S404，可知，为了使得在发生支持状态切换的情况下，用户仍然察觉不到输入框的占位符样式发生改变，则需要模拟上一次加载目标项目时的占位符样式效果，因此，本实施例的服务器可以在所述新的输入框位置上添加具有所述客户端浏览器上一次加载目标项目时的占位符样式属性的行内元素，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致，从而，在显示效果上，用户无法察觉前后两次输入框的视觉差异，避免了由于输入框占位符样式出现的差异而降低用户使用体验的情况。

本实施例中，通过对该行内元素进行样式控制，使行内元素的样式与采用占位符功能生成的输入框组件的样式一致、行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致，用户不会感知到输入框的占位符功能无法使用，可以正常显示输入框的样式和占位符文本，使得服务器的项目兼容所有浏览器内核版本的客户端，避免出现输入框显示不正常的情况，提升了用户的使用体验。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

在一实施例中，提供一种浏览器输入框展示装置，该浏览器输入框展示装置与上述实施例中浏览器输入框展示方法一一对应。如图9所示，该浏览器输入框展示装置包括功能检测模块701、输入框生成模块702和行内元素添加模块703。各功能模块详细说明如下：

功能检测模块701，用于在客户端的浏览器加载目标项目后，检测所述浏览器是否支持占位符功能；

输入框生成模块702，用于若所述功能检测模块的检测结果为否，则当接收到在所述浏览器上展示输入框的请求时，生成不带占位符功能的新的输入框；

行内元素添加模块703，用于在所述新的输入框位置上添加预设的行内元素，所述行内元素的样式与采用占位符功能生成的输入框组件的样式一致，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。

进一步地，所述浏览器输入框展示装置还可以包括：

功能判断模块，用于判断所述客户端的浏览器上一次加载目标项目时是否支持占位符功能；

第一触发模块，用于若所述功能判断模块的判断结果为否，则触发所述输入框生成模块；

属性获取模块，用于若所述功能判断模块的判断结果为是，则获取所述客户端的浏览器上一次加载目标项目时采用的占位符样式属性；

第一生成模块，用当接收到在所述浏览器上展示输入框的请求时，生成不带占位符功能的新的输入框；

元素添加模块，用于在所述第一生成模块生成的所述新的输入框位置上添加具有上一次加载目标项目时采用的占位符样式属性的行内元素，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。

进一步地，所述属性获取模块具体可以包括：

记录查询单元，用于查询样式属性历史记录，确定所述客户端的浏览器最近一次加载目标项目的加载时间，所述样式属性历史记录记录了所述客户端每次加载项目时的加载时间与所采用的占位符样式属性的对应关系；

属性确定单元，用于根据所述样式属性历史记录获取与确定出的所述加载时间对应的占位符样式属性；

所述样式属性历史记录通过以下模块预先得到：

图片截取模块，用于在所述客户端的浏览器每次加载项目时成功加载出输入框后，截取加载出的带占位符文本的所述输入框的效果图片；

图像识别模块，用于对所述效果图片进行图像识别，得到所述输入框上占位符样式属性；

加载时间获取模块，用于获取所述客户端的浏览器本次加载项目的加载时间；

关联存储模块，用于关联存储所述加载时间和得到的所述占位符样式属性，得到所述样式属性历史记录。

进一步地，所述功能检测模块可以包括：

输入框新建单元，用于在所述浏览器上新建测试用的输入框；

输入框判断单元，用于判断所述测试用的输入框是否带有占位符属性；

第一确定单元，用于若所述输入框判断单元的判断结果为是，则确定所述浏览器支持占位符功能；

第二确定单元，用于若所述输入框判断单元的判断结果为否，则确定所述浏览器不支持占位符功能。

进一步地，所述浏览器输入框展示装置还可以包括：

输入值监听模块，用于监听所述新的输入框中的值；

隐藏模块，用于若所述输入值监听模块监听到所述新的输入框中有值，则将所述行内元素的内容调整为隐藏状态；

显示模块，用于若所述输入值监听模块监听到所述新的输入框中无值，则将所述行内元素的内容调整为显示状态。

关于浏览器输入框展示装置的具体限定可以参见上文中对于浏览器输入框展示方法的限定，在此不再赘述。上述浏览器输入框展示装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图10所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储浏览器输入框展示方法中涉及到的数据。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种浏览器输入框展示方法。

在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述实施例中浏览器输入框展示方法的步骤，例如图2所示的步骤S101至步骤S104。或者，处理器执行计算机程序时实现上述实施例中浏览器输入框展示装置的各模块/单元的功能，例如图9所示模块701至模块703的功能。为避免重复，这里不再赘述。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述实施例中浏览器输入框展示方法的步骤，例如图2所示的步骤S101至步骤S104。或者，计算机程序被处理器执行时实现上述实施例中浏览器输入框展示装置的各模块/单元的功能，例如图9所示模块701至模块703的功能。为避免重复，这里不再赘述。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。

以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。

Claims (8)

1.一种浏览器输入框展示方法，其特征在于，包括：

在客户端的浏览器加载目标项目后，检测所述浏览器是否支持占位符功能；

若所述浏览器不支持占位符功能，则当接收到在所述浏览器上展示输入框的请求时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框；

在所述新的输入框位置上添加预设的行内元素，以将所述新的输入框模拟成带占位符功能的输入框组件，其中，所述行内元素的样式与采用占位符功能生成的输入框组件的样式一致，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致；

在生成不带占位符功能的新的输入框之前，还包括：判断所述客户端的浏览器上一次加载目标项目时是否支持占位符功能；

若所述客户端的浏览器上一次加载目标项目时不支持占位符功能，则执行生成不带占位符功能的新的输入框的步骤；

若所述客户端的浏览器上一次加载目标项目时支持占位符功能，则获取所述客户端的浏览器上一次加载目标项目时采用的占位符样式属性；

当接收到在所述浏览器上展示输入框的请求时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框；在所述新的输入框位置上添加具有上一次加载目标项目时采用的占位符样式属性的行内元素，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。

2.根据权利要求1所述的浏览器输入框展示方法，其特征在于，所述获取所述客户端的浏览器上一次加载目标项目时采用的占位符样式属性具体包括：

查询样式属性历史记录，确定所述客户端的浏览器最近一次加载目标项目的加载时间，所述样式属性历史记录记录了所述客户端每次加载项目时的加载时间与所采用的占位符样式属性的对应关系；

根据所述样式属性历史记录获取与确定出的所述加载时间对应的占位符样式属性；

所述样式属性历史记录通过以下步骤预先得到：

在所述客户端的浏览器每次加载项目时成功加载出输入框后，截取加载出的带占位符文本的所述输入框的效果图片；

对所述效果图片进行图像识别，得到所述输入框上占位符样式属性；

获取所述客户端的浏览器本次加载项目的加载时间；

关联存储所述加载时间和得到的所述占位符样式属性，得到所述样式属性历史记录。

3.根据权利要求1所述的浏览器输入框展示方法，其特征在于，所述检测所述浏览器是否支持占位符功能包括：

在所述浏览器上新建测试用的输入框；

判断所述测试用的输入框是否带有占位符属性；

若所述测试用的输入框带有占位符属性，则确定所述浏览器支持占位符功能；

若所述测试用的输入框不带有占位符属性，则确定所述浏览器不支持占位符功能。

4.根据权利要求1至3中任一项所述的浏览器输入框展示方法，其特征在于，在所述新的输入框位置上添加预设的行内元素之后，所述浏览器输入框展示方法还包括：

监听所述新的输入框中的值；

若所述新的输入框中有值，则将所述行内元素的内容调整为隐藏状态；

若所述新的输入框中无值，则将所述行内元素的内容调整为显示状态。

5.一种浏览器输入框展示装置，其特征在于，包括：

功能检测模块，用于在客户端的浏览器加载目标项目后，检测所述浏览器是否支持占位符功能；

输入框生成模块，用于若所述功能检测模块的检测结果为否，则当接收到在所述浏览器上展示输入框的请求时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框；

行内元素添加模块，用于在所述新的输入框位置上添加预设的行内元素，以将所述新的输入框模拟成带占位符功能的输入框组件，其中，所述行内元素的样式与采用占位符功能生成的输入框组件的样式一致，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致；

所述浏览器输入框展示装置还包括：

功能判断模块，用于判断所述客户端的浏览器上一次加载目标项目时是否支持占位符功能；

第一触发模块，用于若所述功能判断模块的判断结果为否，则触发所述输入框生成模块；

属性获取模块，用于若所述功能判断模块的判断结果为是，则获取所述客户端的浏览器上一次加载目标项目时采用的占位符样式属性；

第一生成模块，用当接收到在所述浏览器上展示输入框的请求时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框；

元素添加模块，用于在所述第一生成模块生成的所述新的输入框位置上添加具有上一次加载目标项目时采用的占位符样式属性的行内元素，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。

6.根据权利要求5所述的浏览器输入框展示装置，其特征在于，所述属性获取模块具体包括：

记录查询单元，用于查询样式属性历史记录，确定所述客户端的浏览器最近一次加载目标项目的加载时间，所述样式属性历史记录记录了所述客户端每次加载项目时的加载时间与所采用的占位符样式属性的对应关系；

属性确定单元，用于根据所述样式属性历史记录获取与确定出的所述加载时间对应的占位符样式属性；

所述样式属性历史记录通过以下模块预先得到：

图片截取模块，用于在所述客户端的浏览器每次加载项目时成功加载出输入框后，截取加载出的带占位符文本的所述输入框的效果图片；

图像识别模块，用于对所述效果图片进行图像识别，得到所述输入框上占位符样式属性；

加载时间获取模块，用于获取所述客户端的浏览器本次加载项目的加载时间；

关联存储模块，用于关联存储所述加载时间和得到的所述占位符样式属性，得到所述样式属性历史记录。

7.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至4任一项所述浏览器输入框展示方法的步骤。

8.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至4任一项所述浏览器输入框展示方法的步骤。

Images