サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019-12-02 21:56
お世話になっております。
以前、要望のフォーラムでこちら→「モバイルメニューの検索ボックスの挙動について」の機能を実装していただきました。
しかしCocoonテーマを最新版にアップデートしたところ、検索ボタンを表示しても入力待ちにならない状態に戻ってしまいました。
私のサイトだけでなく、このCocoonテーマの公式サイトでも同じ挙動になっております。
できれば以前と同じく検索ボタンをタップした段階でスマホのキーボードが立ち上がるようにして頂けるとありがたいのですが…
それではよろしくお願いいたします。
2019-12-12 23:18
こんばんは。
こちらの件は、検索ボタンを押して拡大される問題ではなく、検索ボタンを押した後、フォーカスが入らない状態に戻っている、という話のようですね。（フォームをタップすれば、キーボードが出てくる状態）
safariのデベロッパーツールで見ましたが、javascriptのコンソールエラーなどは見つからず、ちょっと原因が分かりませんでした・・・。
わいひら reacted
2019-12-12 23:50
あ、そっちか ? ?
でも特に最近コードは変更してないようですけどなぜなんだろう…。
変更したとき。
https://github.com/yhira/cocoon/commit/7f2d7e9a2c3f7770a6f61f3f2bf69a814d06645e#diff-dee1eb0a17b89ee10e8277a3fdd706da
現在。
https://github.com/yhira/cocoon/blob/b5ac8eaf61ad2dd327865d82640976970b73d4ac/javascript.js#L58
2019-12-13 00:35
iOS以外でも、そうなっていますね。
調べたところ、モーダルウィンドウが出る前に処理されてるみたいです。
https://stackoverflow.com/questions/15859113/focus-not-working
setTimeout()で処理を遅らせてあげると、フォーカスが来ました。
わいひら reacted
2019-12-13 00:52
なるほど！
以前のトピックを見る限りでは、そのタイミングで問題なかったようですが、ブラウザのアップデートか何かでタイミングが変わってしまったんですかね。
setTimeoutでフォーカスのタイミングを変更してみました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
https://github.com/yhira/cocoon/commit/0b98e750defca278fca5453f1b41cc48fc371b12
当サイトにも適用してあるので、このサイトのモバイルボタンでも試せます。
たなかまさん、ありがとうございます！
2019-12-13 12:47
ありがとうございます。
iOSで検索ボタンをタップ→フォームにフォーカス＆キーボードが起動したのを確認いたしました。
実機を持たれている方もご確認いただけると幸いです。
こちらのコメント欄を読むと、setTimeout()に頼らない方が良いとのことですが、setTimeout()を使わず直す方法が分からない・・・。
https://stackoverflow.com/questions/15859113/focus-not-working
This post was modified 4年前 by たなかま
わいひら reacted
2019-12-13 15:29
iPhoneにて試してみました。
以下フォーカス・キーボードの動作に関する備考はスマホの状況です。
実機がないと分かりづらいかと思いますが参考になれば幸いです。
Cocoon 2.0.0.3～12月2日の報告までの間の更新に何か原因がありそう？
【2.0.0.3】
スマホ：フォーカス○、キーボード○
PC：フォーカス○
2.0.0.3のテスト環境があったので試しました。こちらはキーボードが起動しました。
【2.0.2.4】
スマホ：フォーカス×、キーボード×
PC：フォーカス×
2.0.2.4ではフォーカスされませんが、背景の黒い部分をタップすると検索画面が消えると同時にフォーカス・キーボードが起動します。(検索画面は透明のままです)
【Cocoonトップページ】
スマホ：フォーカス○、キーボード×
PC：フォーカス○
タッチ後フォームにフォーカスされるもののキーボードは起動しませんでした。※添付画像
（フォームにカーソルが入っていないようです）
背景の黒い部分をタップしてもキーボードは起動しません。
【確認環境】
スマホ：iPhone 8 iOS13.2.3
PC：Win10 Chrome
This post was modified 4年前 2回 by 草村
わいひら reacted
2019-12-13 19:23
こちらのコメント欄を読むと、setTimeout()に頼らない方が良いとのことですが、setTimeout()を使わず直す方法が分からない・・・。
あまりスマートな方法ではないとは思いつつも、僕も他の方法が分からないです… ?
Cocoon 2.0.0.3～12月2日の報告までの間の更新に何か原因がありそう？
今、2.0.0.3から遡って見ているのですが、JavaScript関係で変更したといえば、まずこれが出てきました。
https://github.com/yhira/cocoon/commit/b5ac8eaf61ad2dd327865d82640976970b73d4ac#diff-dee1eb0a17b89ee10e8277a3fdd706da
この部分を削除すると動作しますでしょうか。
https://github.com/yhira/cocoon/blob/0b98e750defca278fca5453f1b41cc48fc371b12/javascript.js#L178
2019-12-13 20:09
画像の部分を削除してみましたが、iPhoneでもダメでした?
あと、「2.0.0.3のjavascript.js」を丸々コピペして書き換えてもダメでした。
※前回書き忘れましたがiPhoneのブラウザはSafariです。
わいひら reacted
2019-12-13 20:48
バージョン：1.7.8.3 これは ｜サイト内検索 検索にカーソルは出なかったです。
バージョン：1.9.9.5.3
バージョン：1.7.8.3
このCocoon: javascript.jsを見てですが
//検索ボタンクリックでフォーカスを入力エリアに移す
$('.search-menu-button').click(function(){
//フォーカスの移動
$('#search-menu-content .search-edit').first().focus();;
});
このコードをバージョン：1.7.8.3に追記すればChromePCで確認時にも
カーソルが出なかったのに出てきました。結構バージョンがふるいんですが＾＾；
わいひら reacted
2019-12-13 21:01
2.0.0.5～2.0.0.6での変更は以下の2つしかない。
https://github.com/yhira/cocoon/commit/330d57089eb433578e54d67dafcca3365c783269
https://github.com/yhira/cocoon/commit/4dca933eaafc0b76e35aea83c96755c609a4449c
なので原因は、こちらと思われる。
https://github.com/yhira/cocoon/commit/4dca933eaafc0b76e35aea83c96755c609a4449c#diff-da232d78aa810382f2dcdceae308ff8e
おそらく、デフォルトでvisibility: hidden;になっているから、フォーカスが移動しないと思われる。
style.cssの記述を削除すれば、何とかなると思うけど、それだと上記トピックの問題が元に戻ってしまうので、とりあえず対策は後で考えます。
2019-12-13 21:11
時間がかからなそうだったので、修正しておきました。
https://github.com/yhira/cocoon
これで多分、カーソルが出ると思います。おそらく。
https://github.com/yhira/cocoon/commit/99d5ee6c53170378ff285f57db25b6944fba1eb7#diff-da232d78aa810382f2dcdceae308ff8e
草村 reacted
2019-12-13 21:45
追記
今githubアップロードが完了して、スマホAndroidとChromePC上で問題ないことを確認できました！
iPhone・iPadでも問題なけば大丈夫そうですね❦
お疲れさまでした ?
わいひら reacted
2019-12-14 17:11
僕の方でもiOSシミュレーターで上手く表示できました。
キーボードが出てくる・出ないは、こちらの環境の設定かもしれないのですが、フォーカスは来ています。
javascriptかと思っていたのですが、CSSとは分かりませんでした。
setTimeout()やdelay()は、その場しのぎで使っちゃいますね・・・。
わいひら reacted
2019-12-14 17:58
ご確認ありがとうございます。
キーボードが出てくる・出ないは、こちらの環境の設定かもしれないのですが、フォーカスは来ています。
ということは、キーボードは出なかったということでしょうか。
まだ2.0.0.3からの違いといえば、SNSボタンの初期位置が違うので、こちらも元に戻しておきました。
https://github.com/yhira/cocoon/commit/0cba06e387b26e8978d1f795136d09338af961fe#diff-da232d78aa810382f2dcdceae308ff8e
javascriptかと思っていたのですが、CSSとは分かりませんでした。
僕も、草村さんのヒントがなかったら、多分わからなかったです。
2019-12-14 21:18
こちらでgithub先行バージョンをiPhone/ipadを持っている人にFTPでアップロードしてもらった結果待ち。ってことで、だれか見てくれた人の返信を待ってみるのが良いカモしれないですね。
2019-12-14 22:03
お疲れさまです。
iPhoneで確認した所、フォーカスされキーボードも起動しました！
（ダウンロードしてアップロードしたCocoonのバージョンは2.0.3です）
原因が解明してよかったです。
ついでに要望なんですが検索フォームをクリックで表示して、検索をせず背景の黒い部分をクリックして閉じてもキーボードが表示されたままになってしまうので
よければ閉じるタイミングでフォーカスが外れるようにしてほしいです。
コード的には例えば以下のような感じです。
最適化出来ているかはちょっと自信ないですが…。
※1回のクリックでlabelとinputの2回分イベントが発生するためタグ名で判別しています。
$('.search-menu-button').click(function(e){
if( e.target.tagName == 'INPUT' ) {
var searchEdit = $('#search-menu-content .search-edit').first();
if( e.target.checked ) {
searchEdit.focus();
} else {
searchEdit.blur();
}
}
});
This post was modified 4年前 by 草村
わいひら reacted
2019-12-14 22:24
※1回のクリックでlabelとinputの2回分イベントが発生するためタグ名で判別しています。
こういう時はchangeがいいみたいですね。
$('#search-menu-input').change(function(e){
わいひら reacted
2019-12-14 22:30
草村さん、コードありがとうございます！
コードを適用したものを、以下にアップしておきました。
https://github.com/yhira/cocoon
変更。
https://github.com/yhira/cocoon/commit/14c406fe6dabf5c42fd0527f6866443ae05eb5c7
僕の環境（※Firefox ? ）で動作確認した限りでは、問題なかったです。
草村 reacted
2019-12-14 22:36
※1回のクリックでlabelとinputの2回分イベントが発生するためタグ名で判別しています。
こういう時はchangeがいいみたいですね。
$('#search-menu-input').change(function(e){
この書き込みを見逃していました ?
こっちも適用しておきました。
https://github.com/yhira/cocoon/commit/76a48ca29b8a3b28c513fe582e1db32e06741147
草村 reacted
2019-12-14 23:12
わいひらさん
ありがとうございます！iPhoneでも確認して問題なかったです。
あと、changeに変えた事でタグ名の判別が不要になったので
if( e.target.tagName == 'INPUT' ) {
の判定を無くして以下で大丈夫でした！
$('#search-menu-input').change(function(e){
var searchEdit = $('#search-menu-content .search-edit').first();
if( e.target.checked ) {
searchEdit.focus();
} else {
searchEdit.blur();
}
});
わいひら reacted
2019-12-15 19:35
ご確認ありがとうございます。
僕も思ったのですが、タグ名が明示的なっていいかなと思ってそのままにしておりました。
ただ、削除した方がコードが短くなって読みやすくなるという利点もあるので、削除しておこうと思います。
草村 reacted
2019-12-15 21:29
わいひらさん
なるほどです。
iPhoneでは記述があってもなくても動作するのは確認済みですので、ご都合に合わせていただければと思います。
お疲れさまでした！
わいひら reacted
2019-12-16 18:59
いえいえ、僕もどっちがいいか半々ぐらいで迷ったので、コードを書いていただいた、草村さんが書き込んでいただけたおかげで、迷う必要が無くなりました ?
草村 reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。