Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

最新版のモバイルメニュー検索について
 
共有:
通知
すべてクリア

[解決済] 最新版のモバイルメニュー検索について

32 投稿
5 ユーザー
21 Likes
2,037 表示
もうふ
 もうふ
(@もうふ)
Active Member
結合: 5年前
投稿: 7
Topic starter  

お世話になっております。

以前、要望のフォーラムでこちら→「モバイルメニューの検索ボックスの挙動について」の機能を実装していただきました。

しかしCocoonテーマを最新版にアップデートしたところ、検索ボタンを表示しても入力待ちにならない状態に戻ってしまいました。

私のサイトだけでなく、このCocoonテーマの公式サイトでも同じ挙動になっております。

できれば以前と同じく検索ボタンをタップした段階でスマホのキーボードが立ち上がるようにして頂けるとありがたいのですが…

それではよろしくお願いいたします。


   
草村
(@kusamura_mono)
Estimable Member Registered
結合: 4年前
投稿: 174
 

あげ(∩・ω・)∩


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

この書き込みを見落としていました ? 
草村さん、ありがとうございます。

ただ、前回の修正点は、現在でも適用されていて、最近特に変更もしていないようなんですけど、現在は当サイトの検索ボタンからでもフォーカスされないのでしょうか


   
草村 reacted
たなかま
(@tanakama)
Prominent Member Registered
結合: 5年前
投稿: 600
 

こんばんは。

こちらの件は、検索ボタンを押して拡大される問題ではなく、検索ボタンを押した後、フォーカスが入らない状態に戻っている、という話のようですね。(フォームをタップすれば、キーボードが出てくる状態)

safariのデベロッパーツールで見ましたが、javascriptのコンソールエラーなどは見つからず、ちょっと原因が分かりませんでした・・・。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

あ、そっちか ? ?
でも特に最近コードは変更してないようですけどなぜなんだろう…。
変更したとき。
https://github.com/yhira/cocoon/commit/7f2d7e9a2c3f7770a6f61f3f2bf69a814d06645e#diff-dee1eb0a17b89ee10e8277a3fdd706da
現在。
https://github.com/yhira/cocoon/blob/b5ac8eaf61ad2dd327865d82640976970b73d4ac/javascript.js#L58


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 5年前
投稿: 600
 

iOS以外でも、そうなっていますね。

調べたところ、モーダルウィンドウが出る前に処理されてるみたいです。

https://stackoverflow.com/questions/15859113/focus-not-working

 

setTimeout()で処理を遅らせてあげると、フォーカスが来ました。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

なるほど!
以前のトピックを見る限りでは、そのタイミングで問題なかったようですが、ブラウザのアップデートか何かでタイミングが変わってしまったんですかね。
setTimeoutでフォーカスのタイミングを変更してみました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
https://github.com/yhira/cocoon/commit/0b98e750defca278fca5453f1b41cc48fc371b12
当サイトにも適用してあるので、このサイトのモバイルボタンでも試せます。

たなかまさん、ありがとうございます!


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 5年前
投稿: 600
 

ありがとうございます。

iOSで検索ボタンをタップ→フォームにフォーカス&キーボードが起動したのを確認いたしました。

実機を持たれている方もご確認いただけると幸いです。

 

こちらのコメント欄を読むと、setTimeout()に頼らない方が良いとのことですが、setTimeout()を使わず直す方法が分からない・・・。

https://stackoverflow.com/questions/15859113/focus-not-working

 

This post was modified 3年前 by たなかま

   
わいひら reacted
草村
(@kusamura_mono)
Estimable Member Registered
結合: 4年前
投稿: 174
 

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 3年前 2回 by 草村

   
わいひら reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

実機がなくても分かるみたいです。Androidでも同じですが、Windows(10)でも検索のカーソルが出るバージョンと出ないバージョンがあるようです。

以下|部分が、点滅的な。

サイト内検索

テーマ名:Cocoon
バージョン:1.9.9.5.3 です。

添付画像あり。

 

  • 古いバージョンのサイトもあったので一応。テーマ名:Cocoon

バージョン:1.7.8.3 これは サイト内検索  検索にカーソルは出なかったです。

 

関係ないけど、草村さんのこれ↓ かわいい ? 

あげ(∩・ω・)∩


   
わいひら and 草村 reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

こちらのコメント欄を読むと、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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

僕の環境で削除して試したけど、Firefoxですらダメだったわ…。


   
草村
(@kusamura_mono)
Estimable Member Registered
結合: 4年前
投稿: 174
 

画像の部分を削除してみましたが、iPhoneでもダメでした?

あと、「2.0.0.3のjavascript.js」を丸々コピペして書き換えてもダメでした。

※前回書き忘れましたがiPhoneのブラウザはSafariです。


   
わいひら reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

バージョン: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
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

メモ。
バージョンを上げていって試してみた限りでは、Firefox環境では2.0.0.5~2.0.0.6の間で何かあった模様。2.0.0.6~動作しなくなる。
とりあえず、後からまた原因を探ります。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

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

これの対応が原因ぽい。
https://wp-cocoon.com/community/skin-bugs/season%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA%E3%81%A7%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%83%BB%E3%83%95%E3%83%83%E3%82%BF%E3%83%BC%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%83%9C%E3%82%BF%E3%83%B3/

おそらく、デフォルトでvisibility: hidden;になっているから、フォーカスが移動しないと思われる。
style.cssの記述を削除すれば、何とかなると思うけど、それだと上記トピックの問題が元に戻ってしまうので、とりあえず対策は後で考えます。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

今、思いついた。透過で対応しようと思います。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

時間がかからなそうだったので、修正しておきました。
https://github.com/yhira/cocoon

これで多分、カーソルが出ると思います。おそらく。
https://github.com/yhira/cocoon/commit/99d5ee6c53170378ff285f57db25b6944fba1eb7#diff-da232d78aa810382f2dcdceae308ff8e


   
草村 reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 
.search-menu-content {
	visibility: visible;
}

こんな感じだとダメですかね???


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

追記

今githubアップロードが完了して、スマホAndroidとChromePC上で問題ないことを確認できました!

 

iPhone・iPadでも問題なけば大丈夫そうですね❦

お疲れさまでした ? 


   
わいひら reacted
たなかま
(@tanakama)
Prominent Member Registered
結合: 5年前
投稿: 600
 

僕の方でもiOSシミュレーターで上手く表示できました。

キーボードが出てくる・出ないは、こちらの環境の設定かもしれないのですが、フォーカスは来ています。

javascriptかと思っていたのですが、CSSとは分かりませんでした。

setTimeout()やdelay()は、その場しのぎで使っちゃいますね・・・。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

ご確認ありがとうございます。

キーボードが出てくる・出ないは、こちらの環境の設定かもしれないのですが、フォーカスは来ています。

ということは、キーボードは出なかったということでしょうか。
まだ2.0.0.3からの違いといえば、SNSボタンの初期位置が違うので、こちらも元に戻しておきました。
https://github.com/yhira/cocoon/commit/0cba06e387b26e8978d1f795136d09338af961fe#diff-da232d78aa810382f2dcdceae308ff8e

javascriptかと思っていたのですが、CSSとは分かりませんでした。

僕も、草村さんのヒントがなかったら、多分わからなかったです。


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 5年前
投稿: 600
 

ということは、キーボードは出なかったということでしょうか。

おそらく、シミュレーターの初期設定がMacの物理キーボードを使う、になっているからだと思います。

ソフトウェアキーボードを使う設定にすると、キーボードが出てくるので問題はなさそうです。

ただ、もしかしたらそれもシミュレーターの設定に依存してる可能性も・・・という感じですね。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

https://github.com/yhira/cocoon

こちらでgithub先行バージョンをiPhone/ipadを持っている人にFTPでアップロードしてもらった結果待ち。ってことで、だれか見てくれた人の返信を待ってみるのが良いカモしれないですね。


   
草村
(@kusamura_mono)
Estimable Member Registered
結合: 4年前
投稿: 174
 

お疲れさまです。

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 3年前 by 草村

   
わいひら reacted
草村
(@kusamura_mono)
Estimable Member Registered
結合: 4年前
投稿: 174
 

※1回のクリックでlabelとinputの2回分イベントが発生するためタグ名で判別しています。

こういう時はchangeがいいみたいですね。

$('#search-menu-input').change(function(e){

https://qiita.com/kazu56/items/9ebc8918fb7a75da9434


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

草村さん、コードありがとうございます!

コードを適用したものを、以下にアップしておきました。
https://github.com/yhira/cocoon
変更。
https://github.com/yhira/cocoon/commit/14c406fe6dabf5c42fd0527f6866443ae05eb5c7
僕の環境(※Firefox ? )で動作確認した限りでは、問題なかったです。


   
草村 reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 
投稿者:: 草村

※1回のクリックでlabelとinputの2回分イベントが発生するためタグ名で判別しています。

こういう時はchangeがいいみたいですね。

$('#search-menu-input').change(function(e){

https://qiita.com/kazu56/items/9ebc8918fb7a75da9434

この書き込みを見逃していました ? 
こっちも適用しておきました。
https://github.com/yhira/cocoon/commit/76a48ca29b8a3b28c513fe582e1db32e06741147


   
草村 reacted
草村
(@kusamura_mono)
Estimable Member Registered
結合: 4年前
投稿: 174
 

わいひらさん

ありがとうございます!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
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

ご確認ありがとうございます。

僕も思ったのですが、タグ名が明示的なっていいかなと思ってそのままにしておりました。
ただ、削除した方がコードが短くなって読みやすくなるという利点もあるので、削除しておこうと思います。


   
草村 reacted
草村
(@kusamura_mono)
Estimable Member Registered
結合: 4年前
投稿: 174
 

わいひらさん

なるほどです。
iPhoneでは記述があってもなくても動作するのは確認済みですので、ご都合に合わせていただければと思います。

お疲れさまでした!


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

いえいえ、僕もどっちがいいか半々ぐらいで迷ったので、コードを書いていただいた、草村さんが書き込んでいただけたおかげで、迷う必要が無くなりました ? 


   
草村 reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました