5

フォーム要素にフォーカスが与えられたときにフッターを非表示にしようとしています。また、フォーム要素がフォーカスを失ったときにフッターを表示したいと思います。これは、blurイベントが処理する必要があります。jQueryMobileのselectmenuフォーム要素でフォーカスまたはブラーイベントを発生させることができません。

これが私のフォーム要素の1つの例です-

<select id="radiology-study-provider" class="selectList"></select>

これは、フォーカスでフッターを非表示にし、ぼかしで表示することになっているjQueryコードです（DOMの準備ができています）-

  $('.selectList').change(function(){
      console.log("the change event is firing");
  });
  $('.selectList').focus(function(){
      $('div:jqmData(role="footer")').hide(); // hide the footer
  });
  $('.selectList').blur(function(){
      $('div:jqmData(role="footer")').show(); // show the footer
  });

変更イベントハンドラーが起動するのに、フォーカスとブラーが起動しないのは奇妙です。

私はこれを以下で試しましたが、機能しません-

  $('.selectList').on('focus', function(){
      $('div:jqmData(role="footer")').hide(); // hide the footer
  });
  $('.selectList').on('blur', function(){
      $('div:jqmData(role="footer")').show(); // show the footer
  });

私もこれを試しました-

   $('.selectList').bind( "focus", function(event, ui) {
       $('div:jqmData(role="footer")').hide(); // hide the footer
  });
   $('.selectList').bind( "blur", function(event, ui) {
       $('div:jqmData(role="footer")').hide(); // hide the footer
  });

また、focusin（）イベントとfocusout（）イベントも試してみましたが、運が悪かったです。何十ものセレクターを試しました（div.ui-selectはそのうちの1つでした）。使用しているセレクターの問題ではないと思います。

私はjQueryMobile1.1.0とjQuery1.7.1を使用しています-http://jquerymobile.com/test/docs/forms/selects/events.htmlでjQueryMobileselectmenuのドキュメントを確認し、Googleと話し、ここで検索しました、およびこの問題を見つけることができません。

4

3 に答える 3

4

これが私のために働いたものです。

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady () {
    document.addEventListener("hidekeyboard", onKeyboardHide, false);
    document.addEventListener("showkeyboard", onKeyboardShow, false);

}

function onKeyboardHide() {
    $('div:jqmData(role="footer")').show(); // show the footer
}

function onKeyboardShow() {
    $('div:jqmData(role="footer")').hide(); // hide the footer
}

私はスタックでこれに出くわしました - Show hide keyboard is not working propery in android phonegapで、リッスンできる 2 つのイベントがあることに気付きました。

于 2012-09-21T17:16:27.087 に答える
1

これは、次の例を使用してうまくいきました。

JS:

<script>
    document.addEventListener("deviceready", function(){}, false);

    $(function() {
        $('.selectList').change(function(){
            console.log("the change event is firing");                                      
        });

        $('.selectList').focus(function(){
            console.log("FOCUS");
            $('#my_footer').hide(); // hide the footer
        });

        $('.selectList').focusout(function(){
            console.log("FOCUS OUT");
            $('#my_footer').show(); // show the footer
        });
    });
</script>

私のフッターのIDはどこ#my_footerですか（以下のHTMLを確認してください）。

HTML:

<body>
    <div data-role="page">
        <div data-role="content">

            <select id="radiology-study-provider" class="selectList">
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">C</option> 
            </select>

        </div>
    </div>
</body>

この例を試してみて、これがうまくいくかどうかを確認してください:S

お役に立てれば。あなたの結果を教えてください。

于 2012-09-21T07:48:12.600 に答える
1

フォーカスイベントをコメントアウトして試してみてください。フォーカスイベントが発生すると、実行されたコードが表示されないために複数回発生することがあります...

$('.selectList').change(function(){
      alert("the change event is firing");
  });

 // $('.selectList').focus(function(){
 //    $('div:jqmData(role="footer")').hide(); // hide the footer
 //    alert("Focus event is firing");
 // });

  $('.selectList').blur(function(){
      //$('div:jqmData(role="footer")').show(); // show the footer
      alert("Blur event is firing");
  });​

フォーカス イベントをコメント アウトしたところ、他の 2 つのイベントが発生したようです。コメントを削除すると、フォーカス イベントが複数回発生していることがわかります。

フィドルをチェック

于 2012-09-21T06:01:21.477 に答える