Google ミュージックの検索バー プロンプト関数 php 修正コード_PHP チュートリアル

問題の説明

ページを読み込むときに、すぐに検索バーにカーソルを置きます。ページが読み込まれて検索バーが初期化されると、この時点で入力された内容は検索プロンプトの代わりに表示されます。検索キーワードのスクリーンショットは次のとおりです:

原因

検索バーの JavaScript 初期化はオンロード中に実行されます。ページには多くの画像リクエストがあるため、完全にロードされるまでに約 3 秒かかり、検索バーの tabindex は 1 に設定されます。検索を優先するユーザーは簡単に遭遇します。

以下は私が独自の理解に基づいて逆コンパイルしたJSコードです。ページがロードされると、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, null, searchBox, hideBox), false); .listen(searchBox, "change", binding(m.hint.onInputChange, null, searchBox, hideBox), false);
hideBox.value = m.hint.getInputValue(searchBox);
}

// 検索を割り当てます。ここに一時変数
m へのヒントを入力します。hint.Gh[searchBox] = searchTip; 検索ボックスが存在する場合、検索ボックスに一時変数と灰色のテキスト クラスを追加します
m.hint.onInputBlur(searchBox);
};

m.hint = function(searchBox, hideBox) {
m.hint.fi(searchBox);

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.value =
}
};

検索ボックスのDOMノードの読み込みからJavaScriptの初期化までの時間を短縮する 検索ボックスが読み込まれた直後にJSを実行できます。もちろん、Google独自の製品はSEOを必要としません。


知識を広げましょう
覚えておいてください。WordPress の検索ボックスにテキスト プロンプトを追加する方法を紹介する記事を書きました。私の方法は単純で、ボックス内のキーワードのみを使用して、それが であるかどうかを判断します。 (つまり、私のプロンプト メッセージは非常に長いです)

このケースを分析する過程で、Google の処理方法が非常に優れており、学習して使用できることがわかりました。本物の検索情報なので、キーワードを完全に区別してコピーライティングを促すことができます


詳細はまた後ほど

この小さな問題は、私を長い間悩ませてきました (ほぼ毎回、この問題に遭遇するたびに)。コードを見てください。Google のエンジニアがこの記事を読んですぐに解決してくれることを願っています)


http://www.bkjia.com/PHPjc/323358.htmlwww.bkjia.com

tru​​e

http://www.bkjia.com/PHPjc/323358.html
技術記事
問題の説明: ページを読み込むときに、検索バーにカーソルをすばやく置きます。ページが読み込まれた後、検索バーに検索プロンプトが表示されます。この時点で入力された内容は...

になります。