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

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

Browser Input Box Display Method, Device, Computer Equipment and Storage Media

The invention discloses a browser input box display method, which is used to solve the problem that some browsers do not support placeholder function, and the input box can not display normally. The method provided by the invention includes: detecting whether the browser supports placeholder function after loading the target item in the browser of the client; if not, generating a new input box without placeholder function on the browser's display page when receiving a request to display the input box on the browser; and adding a preset input box position on the new input box position. In-line elements to simulate the new input box as an input box component with placeholder function, in which the style of in-line elements is consistent with that of the input box component generated with placeholder function, and the content of in-line elements is consistent with that of the placeholder text of the input box component generated with placeholder function. The invention also provides a browser input frame display device, a computer device and a storage medium.

【技术实现步骤摘要】
浏览器输入框展示方法、装置、计算机设备及存储介质
本专利技术涉及浏览器
，尤其涉及浏览器输入框展示方法、装置、计算机设备及存储介质。
技术介绍
不同客户端使用的浏览器可能各不相同，比如有些客户端浏览器采用ie(InternetExplorer)内核，有些客户端浏览器采用Chrome内核；并且，相同内核之间也会存在内核版本的差异，比如ie内核有ie9、ie10、ie11，等等。目前，当服务器作为数据提供端，比如网页的数据提供端，用户采用客户端浏览器访问服务器，加载服务器上项目的数据时，很多情况下需要加载输入框，即input标签。但是，存在部分浏览器内核无法支持HTML的inputplaceholder(输入占位符)，即不支持占位符功能，这导致这些客户端浏览器在显示输入框时无法正常展示样式和占位符文本，不方便用户的使用，降低了用户的使用体验。
技术实现思路
基于此，有必要针对上述技术问题，提供一种可以提高服务器项目对所有浏览器内核版本的兼容性的浏览器输入框展示方法、装置、计算机设备及存储介质。一种浏览器输入框展示方法，包括：在客户端的浏览器加载目标项目后，检测所述浏览器是否支持占位符功能；若所述浏览器不支持占位符功能，则当接收到在所述浏览器上展示输入框的请求时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框；在所述新的输入框位置上添加预设的行内元素，以将所述新的输入框模拟成带占位符功能的输入框组件，其中，所述行内元素的样式与采用占位符功能生成的输入框组件的样式一致，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。一种浏览器输入框展示装置，包括：功能检测模块，用于在客户端的浏览器加载目标项目后，检测所述浏览器是否支持占位符功能；输入框生成模块，用于若所述功能检测模块的检测结果为否，则当接收到在所述浏览器上展示输入框的请求时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框；行内元素添加模块，用于在所述新的输入框位置上添加预设的行内元素，以将所述新的输入框模拟成带占位符功能的输入框组件，其中，所述行内元素的样式与采用占位符功能生成的输入框组件的样式一致，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述浏览器输入框展示方法的步骤。一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述浏览器输入框展示方法的步骤。上述浏览器输入框展示方法、装置、计算机设备及存储介质，首先，在客户端的浏览器加载目标项目后，检测所述浏览器是否支持占位符功能；若所述浏览器不支持占位符功能，则当接收到在所述浏览器上展示输入框的请求时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框；然后，在所述新的输入框位置上添加预设的行内元素，以将所述新的输入框模拟成带占位符功能的输入框组件，其中，所述行内元素的样式与采用占位符功能生成的输入框组件的样式一致，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。本专利技术中，通过对该行内元素进行样式控制，使行内元素的样式与采用占位符功能生成的输入框组件的样式一致、行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致，用户不会感知到输入框的占位符功能无法使用，可以正常显示输入框的样式和占位符文本，使得服务器的项目兼容所有浏览器内核版本的客户端，避免出现输入框显示不正常的情况，提升了用户的使用体验。附图说明为了更清楚地说明本专利技术实施例的技术方案，下面将对本专利技术实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。图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，可以理解的是，为了检测该浏览器是否支持占位符功能，可以先尝试浏览器上的占位符功能，若占位符功能能正常使用，则新建的输入框必然会带有占位符属性。因此，可以先在该浏览器上新建一个测试用的输入框。应当知道的是，新建的这个测试用的输入框时，一般本文档来自技高网...

【技术保护点】
1.一种浏览器输入框展示方法，其特征在于，包括：在客户端的浏览器加载目标项目后，检测所述浏览器是否支持占位符功能；若所述浏览器不支持占位符功能，则当接收到在所述浏览器上展示输入框的请求时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框；在所述新的输入框位置上添加预设的行内元素，以将所述新的输入框模拟成带占位符功能的输入框组件，其中，所述行内元素的样式与采用占位符功能生成的输入框组件的样式一致，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。

【技术特征摘要】
1.一种浏览器输入框展示方法，其特征在于，包括：在客户端的浏览器加载目标项目后，检测所述浏览器是否支持占位符功能；若所述浏览器不支持占位符功能，则当接收到在所述浏览器上展示输入框的请求时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框；在所述新的输入框位置上添加预设的行内元素，以将所述新的输入框模拟成带占位符功能的输入框组件，其中，所述行内元素的样式与采用占位符功能生成的输入框组件的样式一致，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。2.根据权利要求1所述的浏览器输入框展示方法，其特征在于，在生成不带占位符功能的新的输入框之前，还包括：判断所述客户端的浏览器上一次加载目标项目时是否支持占位符功能；若所述客户端的浏览器上一次加载目标项目时不支持占位符功能，则执行生成不带占位符功能的新的输入框的步骤；若所述客户端的浏览器上一次加载目标项目时支持占位符功能，则获取所述客户端的浏览器上一次加载目标项目时采用的占位符样式属性；当接收到在所述浏览器上展示输入框的请求时，在浏览器的显示页面上生成所述目标项目所需的不带占位符功能的新的输入框；在所述新的输入框位置上添加具有上一次加载目标项目时采用的占位符样式属性的行内元素，所述行内元素的内容与采用占位符功能生成的输入框组件的占位符文本一致。3.根据权利要求2所述的浏览器输入框展示方法，其特征在于，所述获取所述客户端的浏览器上一次加载目标项目时采用的占位符样式属性具体包括：查询样式属性历史记录，确定所述客户端的浏览器最近一次加载目标项目的加载时间，所述样式属性历史记录记录了所述客户端每次加载项目时的加载时间与所采用的占位符样式属性的对应关系；根据所述样式属性历史记录获取与确定出的所述加载时间对应的占位符样式属性；所述样式属性历史记录通过以下步骤预先得到：在所述客户端的浏览器每次加载项目时成功加载出输入框后，截取加载出的带占位符文本的所述输入框的效果图片；对所述效果图片进行图像识别，得到所述输入框上占位符样式属性；获取所述客户端的浏览器本次加载项目的加载时间；关联存储所述加载时间和得到的所述占位符样式属性，得到所述样式属性历史记录。4.根据权利要求1所述的浏览器输入框展示方法，其特征在于，所述检测所述浏览器是否支持占位符功能包括：在所述浏览器上新建测试用的输入框；判断所述测试用的输入框是否带有占位符属性；若所述测试用的输入框带有占位符属性，则确定所述浏览器支持占位符功能；若所述测试用的输入框不带有占位符属性，则确定所述浏览器不支持占位符功能。5.根据权利要求1至4中任一项所述的浏览器输入框展示方法，其特征在于，在所述新的输入框位置上添加预设的行内元素之后，所述浏览器输入框展示方法还包括：监听所述新的输入框中的值；若所述新的输入框中有值，则将所述行内元素的内容调整为隐藏状态；若所述新的输入框...

【专利技术属性】
技术研发人员：王建华，
申请(专利权)人：平安科技深圳有限公司，
类型：发明
国别省市：广东,44