スライドインメニュー表示時にスマホでコメント入力がしにくいとの声がユーザーからありました

Simplicityの特徴 フォーラム Simplicityについての質問 スライドインメニュー表示時にスマホでコメント入力がしにくいとの声がユーザーからありました

  • このトピックには20件の返信、2人の参加者があり、最後ににより10ヶ月、 1週前に更新されました。
20件の返信スレッドを表示中
  • 投稿者
    投稿
    • #45659 返信
      zax
      ゲスト

      お世話になります。
      早速ですが、
      ただいま【モバイルメニューでスライドインライト(ボタン下)】を使わせて頂いているのですが、
      スマホでコメント入力がしにくいとの声がユーザーからありました。
      表示されているメニューで、コメント入力のスペースが少し失われるということだと思います。

      たとえばなんですが、コメント入力欄にフォーカスした際だけ、スライドインライト(ボタン下)を非表示には出来るのでしょうか?

    • #45661 返信
      hidekichi
      ゲスト

      もしコメント入力中でもコメント欄からfocusが外れないのであれば、

      ■jQuery

      (function($){
      	$(function(){
      		$("#comment-area").find("textarea")
      			.on("focus", function(){
      				$("#footer-mobile-buttons").addClass("active");
      			})
      			.on("blur", function(){
      				$("#footer-mobile-buttons").removeClass("active");
      			});
      	});
      })(jQuery);

      ■css
      #footer-mobile-buttons {
      transition: .3s ease;
      }
      #footer-mobile-buttons.active {
      transform: translate(0,200%);
      }

      こんなのでどうでしょうか?
      別途非表示用ボタンを作れば、これら動作はどこでも可能です。

    • #45662 返信
      hidekichi
      ゲスト
      #footer-mobile-buttons {
        transition: .3s ease;
      }
      #footer-mobile-buttons.active {
        transform: translate(0, 200%);
      }

      コード入れるの忘れてました。

    • #45663 返信
      zax
      ゲスト

      hidekichi様

      早速のご返答有難うございます!

      (function($){
      	$(function(){
      		$("#comment-area").find("textarea")
      			.on("focus", function(){
      				$("#footer-mobile-buttons").addClass("active");
      			})
      			.on("blur", function(){
      				$("#footer-mobile-buttons").removeClass("active");
      			});
      	});
      })(jQuery);

      こちらのコードは、子テーマのfunctions.phpに記述すれば宜しいのでしょうか?

    • #45666 返信
      hidekichi
      ゲスト

      子テーマjavascript.jsです。

    • #45667 返信
      zax
      ゲスト

      記述してシークレットで確認しましたが、コメント欄にフォーカス時にメニューは消えませんでした。
      コメントのプラグインを入れていたので、それを一旦停止にしてみましたが、それでもダメでした。

      jqueryは子テーマjavascript.js、cssは子テーマのmobile.cssに記述しました。

    • #45669 返信
      hidekichi
      ゲスト

      表示用のサンプル作りました。実機でもサンプルでも機能的には同じことです。
      もしかするとスマホでfocusが効かないのかも知れないと言うことでtouchendを入れてみました。

      サンプル: スライドインメニューバーをtextareaのfocusで表示非表示 | codepen

      これを実機なりで見て確認してみてください。

    • #45670 返信
      アバター画像わいひら
      キーマスター

      僕の環境で試してみたところ、#45661のコードの$("#comment-area").find("textarea")$("textarea#comment")に変更するとうまくいきました。原因はわかりませんが。
      この機能は、次のバージョンで使わせてもらおうと思います。
      hidekichiさん、使わせていただきます。

    • #45671 返信
      hidekichi
      ゲスト

      > わいひらさん

      ひとまずの所、スマホでfocusが効くのか、はたまたblur(focusが外れた時)が効くのかを確かめてもらってからのほうが良いかと思います。

      場合によってはtouchインベントか、clickで代用できると思うんですけども、外れたときをどうしようか考え中です。
      それなら何かしらボタンをメニュー内にと思いましたが、バーが非表示になるともちろんその操作するボタンを消えるので中に入れることはできずで、入れたメニューだけ表示しようかと思いましたが結局それでは邪魔になるのは変わりないでしょうし、どこにイベントの発火ポイントを持っていくべきかが問題点です。

    • #45674 返信
      アバター画像わいひら
      キーマスター

      とりあえずのAndroidエミュレーター(Nox App Player)のAndroidブラウザで試してみたら、動作しないようでした。
      あと、アニメーションも動作しないようだったので、動きに何の面白味もないのですが、以下のように変更したら動作しました。

      jQuery

      $('textarea#comment')
        .focusin(function(e) {
          $("#footer-mobile-buttons").addClass("active");
        })
        .focusout(function(e) {
          $("#footer-mobile-buttons").removeClass("active");
        });

      CSS宇

      #footer-mobile-buttons.active {
        display: none;
      }

      動作は、hidekichiさんが書かれたものの方が断然好みなのですが、無念。

      動作テストページ。
      http://simplicity.wp.xdomain.jp/post-2230/

    • #45675 返信
      zax
      ゲスト

      hidekichi様

      表示サンプルを実機で拝見いたしました。
      下記のようになり、バーを隠せるようになっておりました。

      スクショ

    • #45677 返信
      hidekichi
      ゲスト

      > わいひらさん

      なるほどfocusinやらはありかも知れませんね。ただ問題はiphoneなんですよ。
      奴は凶悪です。もしかするとfocus自体ができないかも知れません。できないってことはないと思うんですけどね。

      そこで、touchendで、テキストエリアをタッチした時と、clickの時(clickは必ず動作すると思いますが)にメニューバーを非表示にして、別途zaxさんにレスしてもらったスクリーンショットのように小さなボタンを表示するようにしてみました。
      このボタンはcssで好きにデザインできます。
      これをクリック(タッチ)で、メニューの表示・非表示ができるのであれば、後は邪魔にならない位置を見つける感じです。

      ここらの意見なり要望が欲しい所です。

      サンプル: 通常版 | codepen
      サンプル: フル表示版 | codepen

      通常版は普通にソース付きの画面です。画面幅が480px以下になったらメニューが出るようにしてあります。
      フル表示版はソース部分のないいわゆるプレビューです。どちらも同じものです。

    • #45678 返信
      アバター画像わいひら
      キーマスター

      あらら。表示サンプルの方をAndroidエミュレータで見てみたら、アニメーションもちゃんと動作していました。
      僕が間違った書き方をしていたのかも。もう一度試してみます。

    • #45679 返信
      アバター画像わいひら
      キーマスター

      おっと、投稿時間が重なってしまった。

    • #45680 返信
      アバター画像わいひら
      キーマスター

      #45677
      「メニューバーを表示」ボタンが出ずに、フォーカスインと、フォーカスアウトしたら動作するバージョンも見せてもらうことは可能でしょうか?

      あとは、以下も含めて、iPhoneユーザーにちゃんと動作するか見てもらうしかないですねこの場合;僕もiPhoneを持っていないので。
      http://codepen.io/Hidekichi/pen/qamvVA/
      http://simplicity.wp.xdomain.jp/post-2230/

    • #45681 返信
      zax
      ゲスト

      #45670

      わいひらさんの書いてくださったコードに変更してみたら、$("textarea#comment")
      私の実機(android)で、入力欄フォーカス時にメニューが非表示になりました。

    • #45682 返信
      hidekichi
      ゲスト

      サンプル: 「メニューバーを表示」ボタンが出ずに、フォーカスインと、フォーカスアウトしたら動作するバージョン | fork-codepen

      こんな感じです。

      ちなみに、このメニューは設定で上と下に別れますよね。これはできたらclassをつけて、

      #footer-mobile-buttons.above
      #footer-mobile-buttons.below

      みたいな感じで分けられるとアニメーションのスタイルがしやすいかと思います。

    • #45683 返信
      アバター画像わいひら
      キーマスター

      hidekichiさんありがとうございます。
      とりあえず、hidekichiさんのコードを参考に、以下のような動作にしました。
      jQuery

      //テキストエリアにフォーカスが入った時にメニューを隠す
      $("textarea#comment")
        .on("touchend focus", function(){
          $("#footer-mobile-buttons").addClass("comment-active");
          $("#container").addClass("comment-active");
        })
        .on("touchend blur", function(){
          $("#footer-mobile-buttons").removeClass("comment-active");
          $("#container").removeClass("comment-active");
        });

      CSS

      #footer-mobile-buttons {
        -webkit-transition: .3s ease;
        transition: .3s ease;
      }
      
      #footer-mobile-buttons.comment-active {
        opacity: 0;
      }
      
      #container.comment-active {
        margin-bottom: 0;
      }

      transform: translate(0, 200%);は、メニューが上つきと、下つきがあるので分岐させるのが面倒だったので、opacity: 0;にしてなるべく簡略な方法を取りました;
      iPhoneが動作しなかったらしなかったで、今まで通りの動作が変わるわけではないので、これで良いかなと。

    • #45685 返信
      hidekichi
      ゲスト

      サンプルではどちらのメニューにも対応できるようにしてみました。
      ラジオボタンの選択で表示を切り替えられるようにしてみました。

      理屈的には、ラジオボタンの値 = カスタマイザーの選択値という感じです。

      カスタマイザーのオプションで、上下いずれかのクラス名が拾えたら、それを付けるだけで比較的簡単に実現できますよ。

    • #45686 返信
      hidekichi
      ゲスト
    • #45695 返信
      アバター画像わいひら
      キーマスター

      サンプルコードありがとうございます!
      とりあえず、後に試してみて動作を検討したいと思います。

20件の返信スレッドを表示中
返信先: スライドインメニュー表示時にスマホでコメント入力がしにくいとの声がユーザーからありました
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)