位置：iOS5で固定入力がフォーカスされたときに移動

モバイルアプリケーションの上部にdiv：位置が固定されているので、ブラウザの上部に表示されます（ios4以下でスクロールします）。）。入力がフォーカスされ、キーボードが表示されると、divはページの中央に移動します。スクリーンショットを参照してください。位置：iOS5で固定入力がフォーカスされたときに移動

http://dbanksdesign.com/ftp/photo_2.PNG

編集：ここではは簡略化されたテストページです： http://dbanksdesign.com/test/

<body> 
<div class="fixed"><input type="text" /></div> 
<div class="content"></div> 
</body> 

.fixed { position:fixed; top:0; left:0; width:100%; background:#ccc; } 
.content { width:100%; height:1000px; background:#efefef; }

出典

2011-11-08 dbanksdesign

「html」、「body」、および「fixed」要素のCSSコードは何ですか？ – ScottS

は、残念ながら、あなたはおそらくIOSでの作業時にごfixed要素に対してabsoluteポジショニングを使用してオフに最適です。はい、IOS5はfixedポジショニングをサポートすると主張していますが、その固定エレメント内にインタラクティブコントロールがあると、すべてがダウンします。

私のswitchitoff.netサイトの検索ボックスに同じ問題がありました。 IOS5では、ページがスクロールされている間に検索ボックスがフォーカスを取得した場合、固定ヘッダーがページの下に飛びます。私は様々な回避策を試みましたが、現在持っているのは<div>で、これは検索ボックスの上にあります。この<div>をクリックすると以下のことが起こります。

ページがfixedヘッダが
検索<input>が隠されている検索ボックスをカバーabsolute
<div>に変更され、トップ
にスクロールされますフォーカスされた

上記の手順は、検索ボックスがフォーカスを失ったときに逆になります。このソリューションは、検索ボックスがクリックされたときにヘッダーがページを飛び越さないようにしますが、単純なサイトでは、最初に絶対配置を使用する方がよいでしょう。

IOS5と固定の位置付けに別のトリッキーな問題があります。 body要素がスクロールしているfixedの領域にクリック可能な要素がある場合、これはあなたのタッチイベントを壊す可能性があります。

たとえば、switchitoff.netで、インタラクティブ要素をスクロールすると、固定ヘッダーのボタンがクリックできなくなりました。 touchstartはタップしたときにこれらのボタンが押されても解雇されませんでした。幸運にもonClickはまだ動作しているように見えましたが、これは遅延のためIOSの最後の手段です。

最後に、固定ヘッダーをクリックしてページをスクロールする方法（IOS5では）に注意してください。私は、通常のブラウザで固定ヘッダーの上でスクロールホイールを使用する方法をエミュレートすることは知っていますが、このパラダイムはタッチUIにとって意味がありませんか？

Appleは固定要素の処理を改善していきますが、その間固定領域に対話型のものがあれば、absoluteの位置づけが容易です。それは事が非常に簡単だったときにIOS4に戻ります！

出典

2011-12-01 17:56:02 JohnW

ボタンがクリック解除可能になっているのは、実際にコンテンツで目に見えないようにスクロールしているためです。彼らはまだそこにいます、元々あった場所でも、あなたがそれらを見たところでもありません。

ボタンがどれだけ移動したかを推測できれば（コンテンツの移動量に基づいて）、不可視のボタンをクリックすると正常に機能します。つまり、コンテンツが50ピクセルスクロールしている場合は、ボタンから50ピクセル離れた場所をクリックすると効果があります。

コンテンツを手動でスクロールすることができます（微量でも）、ボタンは再び正常に動作します。私はこの回避策を思い付いた代わりにfixedのabsoluteを使用するJohnWのrecomendationを使用して

出典

2012-02-23 08:14:14

：

まず入力のonFocusとき、検出ページの一番上までスクロールし、要素を変更するにはbindを設定positionabsoluteへ：私は入力を含むされたdivのトップバーの入力およびtextinput-containerのID textinputを使用してい

$('#textinput').bind('focus',function(e) { 
    $('html,body').animate({ 
     scrollTop: 0 
    }); 
    $('#textinput-container').css('position','absolute'); 
    $('#textinput-container').css('top','0px'); 
});

注意。

私は下部に固定バーのために同様のソリューションを使用してきた入力が焦点にないときにバック fixed

$('#textinput').bind('blur',function(e) { 
    $('#textinput-container').css('position','fixed'); 
    $('#textinput-container').css('top','0px'); 
});

へのdivの位置を変更することがもう検出するために、別のバインドを設定

ページの上部に固定されたバーのコードが正しく動作するはずですが、テストしませんでした。

出典

2012-11-01 19:24:23 pablobart

私のためにうまくいく、ありがとう。そうでなければちらつきがあるので、ページが実際にスクロールされた場合には、フォーカスにあるものだけを行うように少し変更しました。 –

このソリューションは私にとってはうまく機能します。すべてのコードは、ユーザーがテキストフィールドをタップしてから 'jQuerySelector'パラメータで指定された要素を 'fixed'から 'static'に変更します。テキストフィールドがフォーカスを失うと（ユーザーが他のものをタップすると）、要素の位置は「固定」に戻されます。

// toggles the value of 'position' when the text field gains and looses focus 
var togglePositionInResponseToInputFocus = function(jQuerySelector) 
{ 
    // find the input element in question 
    var element = jQuery(jQuerySelector); 

    // if we have the element 
    if (element) { 

     // get the current position value 
     var position = element.css('position'); 

     // toggle the values from fixed to static, and vice versa 
     if (position == 'fixed') { 
      element.css('position', 'static'); 
     } else if (position == 'static') { 
      element.css('position', 'fixed'); 
     } 
    } 
};

と、関連するイベントハンドラ：

var that = this; 

// called when text field gains focus 
jQuery(that.textfieldSelector).on 
(
    'focusin', 
    function() 
    { 
     togglePositionInResponseToInputFocus(that.jQuerySelector); 
    } 
); 

// called when text field looses focus 
jQuery(that.textfieldSelector).on 
(
    'focusout', 
    function() 
    { 
     togglePositionInResponseToInputFocus(that.jQuerySelector); 
    } 
);

出典

2013-02-28 18:34:12

だけ焦点にあなたの固定要素を隠し、その後focusoutに再びそれを示しています。私はあなたのユーザーが集中したときにそれを見る必要はないと確信しています。私はこれが解決策ではないことを知っていますが、よりよいアプローチだと思います。単純にする。

出典

2014-02-04 19:20:41 Websitescenes

pablobartのソリューションのバージョンが、一番上にスクロールせずに変更：

// Absolute position 
$('#your-field').bind('focus',function(e) { 
    setTimeout(function(){ 
     $('section#footer').css('position','absolute'); 
     $('section#footer').css('top',($(window).scrollTop() + window.innerHeight) - $('section#footer').height()); 
    }, 100); 
}); 

// Back to fixed position 
$('#your-field').bind('focusout',function(e) { 
    $('section#footer').removeAttr('style'); 
});

シンプルなCSS： 部＃フッター * {位置：固定;下：0;左：0;高さ：42px} *

出典

2014-04-07 08:56:07 Phil

位置：iOS5で固定入力がフォーカスされたときに移動

答えて

関連する問題