Google music search bar prompt function php correction code_PHP tutorial

Problem Description

When loading the page, quickly position the cursor on the search bar. After the page is loaded, the search bar will display a search prompt after initialization. Any content entered at this time will become part of the search prompt instead of the search keywords. . The screenshot is as follows:

Reason

The JavaScript initialization of the search bar is executed during onload. Because the page has many image requests, it takes about 3 seconds to fully load, and the tabindex of the search bar is set to 1, so users who prioritize search can easily encounter it.

The following is the JS code I decompiled based on my own understanding. When the page is onloaded, the m.hint.initHint method will be executed to add a hint function to the search box.

Copy the code The code is as follows:

/**
* Add prompt function to the search box
* @param searchTip Prompt information
* @param searchBoxId Search input box ID
* @param hideBoxId Keyword hidden box 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, null, searchBox, hideBox), false);
if(hideBox){
l.events.listen(searchBox, "change", bind(m.hint.onInputChange, null, searchBox, hideBox), false);
hideBox.value = m.hint.getInputValue(searchBox);
}

// Assign the search hint to the temporary variable here
m.hint.Gh[searchBox] = searchTip;
// If the search box exists, add temporary variables and gray text class to the search box
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;
}
}
};

Solution
Shorten The time between the search box DOM node loading and JavaScript initialization. JS can be executed immediately after the search box is loaded. Google’s own products do not require SEO anyway. Of course, it is best to execute it when the DOM is ready.

Expand knowledge
I remember I wrote an article on how to add text prompts in the WordPress search box. My method is simple and crude, and I only use the keywords in the box to determine whether it is a keyword or a prompt. Information. (So my prompt message is very long)

In the process of analyzing this case, I found that Google’s approach is very good and can be learned and used. It hides the input box to place the real search information , so the complete distinction between keywords and prompt copy can be achieved.

Afterword
This little problem has been bothering me for a long time (almost every time I encounter it), and today I finally couldn’t bear it anymore I took a look at the code, and I hope Google engineers can read this article and solve it quickly. (I have given you all the suggestions for modification, and it doesn’t make sense if I don’t change it)

http://www.bkjia.com/PHPjc/323358.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/323358.htmlTechArticleProblem description: When loading the page, quickly position the cursor on the search bar. After the page is loaded, the search bar After initialization, a search prompt will be displayed. Anything entered at this time will become...