谷歌音乐搜索栏的提示功能php修正代码
发布时间:2020-12-13 05:53:18 所属栏目:PHP教程 来源:网络整理
导读:问题描述 在加载页面的时候,将光标快速定位到搜索栏上,待页面加载完成,搜索栏进行初始化后会显示搜索提示. 此时输入的任何内容将成为搜索提示的一部分而不是搜索关键字. 截图如下: 导致原因 搜索栏的 JavaScript 初始化执行在 onload 的时候. 因为页面图片请
问题描述在加载页面的时候,将光标快速定位到搜索栏上,待页面加载完成,搜索栏进行初始化后会显示搜索提示. 此时输入的任何内容将成为搜索提示的一部分而不是搜索关键字. 截图如下:
导致原因搜索栏的 JavaScript 初始化执行在 onload 的时候. 因为页面图片请求多,完全加载需要 3 秒钟左右,并且搜索栏的 tabindex 被设为 1,搜索优先的用户很容易就能遇到. 以下是我根据自己的理解反编译出来的 JS 代码,页面在 onload 的时候将会执行 m.hint.initHint 方法为搜索框添加提示功能. 代码如下: /** * 为搜索框添加提示功能 * @param searchTip 提示信息 * @param searchBoxId 搜索输入框 ID * @param hideBoxId 关键字隐藏框 ID */ m.hint.initHint = function(searchTip,searchBoxId,hideBoxId){ var searchBox = document.getElementById(searchBoxId); var hideBox = null; if(searchBox){ if(hideBoxId) { hideBox = document.getElementById(hideBoxId); } l.events.listen(searchBox,"blur",l.bind(m.hint.onInputBlur,null,searchBox,hideBox),false); l.events.listen(searchBox,"focus",l.bind(m.hint.onInputFocus,false); if(hideBox){ l.events.listen(searchBox,"change",bind(m.hint.onInputChange,false); hideBox.value = m.hint.getInputValue(searchBox); } // 在这里将搜索提示赋给临时变量 m.hint.Gh[searchBox] = searchTip; // 如果搜索框存在,则为搜索框加上临时变量和灰色字的 class m.hint.onInputBlur(searchBox); } }; m.hint.onInputBlur = function(searchBox,hideBox) { m.hint.fi(searchBox); hideBox && m.hint.onInputChange(searchBox,hideBox); }; m.hint.fi = function(searchBox) { if(searchBox) { var searchTip = m.hint.Gh[searchBox]; if(searchTip && (searchBox.value.trim()=="" || searchBox.value==searchTip)) { searchBox.setAttribute(m.hint.IS_HINT,"1"); searchBox.className += " hint"; searchBox.value = searchTip; } } }; 解决办法缩短搜索框 DOM 节点加载和 JavaScript 初始化之间的时间. 可以在搜索框加载完成后立刻执行 JS,反正 Google 自己的产品也不需要 SEO. 当然,最好在 DOM ready 的时候执行. 扩展知识记得我写过一篇文章,介绍如何在 WordPress 搜索框添加文字提示. 我的处理办法简单粗暴,仅以框内关键字来判断是关键字还是提示信息. (所以我的提示信息很长) 在分析这个案例的过程中,我发现 Google 的处理办法很好,可以借鉴和使用. 它通过隐藏输入框来放置真正的搜索信息,所以可以实现完全关键字和提示文案的区分. 后话这个小问题已经困扰我很久了 (几乎每次遇到),今天终于忍不住看了一下代码,希望 Google 的工程师能够看到本文快速解决掉. (修改建议我都给出来了,还不改也说不过去吧) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |