Problem description
When loading the page, the cursor is quickly positioned on the search bar, and the search prompt is displayed when the page is loaded and the search bar is initialized. Any content you enter at this point will be part of the search hint instead of a search keyword. Screenshot below:
Cause cause
The JavaScript initialization of the search bar executes when onload. Because the page picture request is many, the complete load needs about 3 seconds, and the search bar's tabindex is set to 1, the search first user is easy to encounter.
The following is my own understanding of the reverse-compiled JS code, the page in the onload will be executed M.hint.inithint method for the search box to add a hint function.
Copy Code code as follows:
/**
* Add hints 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 a search hint here to a temporary variable
M.hint.gh[searchbox] = Searchtip;
If the search box exists, then the search box adds a temporary variable and a gray word 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;
}
}
};
Solutions
Shorten the time between the search box DOM node load and JavaScript initialization. The search box can be completed immediately after the implementation of JS, anyway, Google's own products do not need to SEO. Of course, it's best to execute when DOM ready.
Extending Knowledge
Remember I wrote an article about how to add text hints in the WordPress search box. My approach is simple and rough, only the key words in the box to determine whether the keyword or hint information. (So my cue message is very long)
In the process of analyzing this case, I found that Google's approach is very good, can be used for reference and use. It hides the input box to place the real search information, so the distinction between the complete keyword and the hint copy can be achieved.
something
This little problem has been bothering me for a long time (almost every time), today I can not help but look at the code, I hope that Google engineers to see this article quickly resolved. (I have given the amendment proposal, not to change it can not be justified)
