0

iPadを使用しているときに、アプリケーションで問題が発生しました。

jQueryを使用してイベントをフォーム要素にバインドする特定のフォームについては、フォームフィールドにマウスを合わせるか、フォームフィールドにフォーカスを置くと、デスクトップで正常に機能することを示す「ツールチップ」があります。ただし、iPad（および他のタッチデバイス）では、フィールドへの最初のクリック/タップ/タッチはとして検出されるmouseenterため、これはツールチップを表示するだけです。

ただし、これにより、現在のように2回目ではなく、最初のタッチでフィールドにデータを入力できるようにしたいと思います。つまり、iPadでもデスクトップと同じように動作するようにします。つまり、ツールチップを表示し、データ入力を許可します。

デバイスとなりすましをまたは同様mouseenterのものとして検出する必要がありclickますか？

// Attach focus and blur events to form elements
bindFocusAndBlurOnFormElements($('INPUT:text, INPUT:password, TEXTAREA, SELECT'), false);

function bindFocusAndBlurOnFormElements(elems) {
   elems.each(function(){
      if ($(this).next().hasClass('tool_tip')) {
         $(this).bind('mouseenter mouseleave focus blur', function(e){
            alert(e.type); 
            if (e.type=='mouseenter' || e.type=='focus') {
                // show the tool tip      
            } else {
               // hide the tool tip
            }
         });
       }    
   }
}
4

1 に答える 1

1

どこかで読んだことがあります：

もう1つの方法は、CSSメディアクエリを使用し、タッチ/タップ機能を備えている可能性が最も高い小さな画面/モバイルデバイスにのみ一部のスタイルを使用することです。したがって、CSSを介して特定のスタイルがあり、jQueryからそれらの要素のモバイルデバイススタイルプロパティを確認する場合は、それらの要素にフックしてモバイル固有のコードを記述できます。

詳細：http ：//www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

別の情報源：

Modernizrは、あらゆるサイトであらゆる種類の機能検出を行うための優れた軽量の方法です。

各機能のhtml要素にクラスを追加するだけです。

その後、CSSとJSでこれらの機能を簡単にターゲットにできます。例えば：

html.touch div {
    width: 480px;
}

html.no-touch div {
    width: auto;
}

そしてJavascript（jQueryの例）：

$('html.touch #popup').hide();

出典：

  1. Javascriptを使用したタッチスクリーンデバイスの検出
  2. javascriptによって生成されたHTMLタグのJavascript関数
于 2012-11-23T16:19:10.967 に答える