web-dev-qa-db-ja.com

モバイルサファリ-入力キャレットはオーバーフロースクロールと一緒にスクロールしません：タッチ

Mobile Safariは、「勢い」（-webkit-overflow-scrolling：touch;）のスクロール中にイベントを発生させないことを知っています。しかし、Safariは入力の（点滅する）キャレットを内部で処理するため、これは完全に同じではありません。

<div id="container">
    <input type="text" />
    <div class="filling"></div>
</div>

#container {
    position: absolute;
    top: 20px;
    bottom: 20px;
    width: 50%;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    border: 1px solid black;
}

input {
    margin-top: 60vh;
}

.filling {
    height: 200vh;
}

デバイスでこのフィドルを試してください（入力に焦点を合わせてからスクロールします）： https://jsfiddle.net/gabrielmaldi/n5pgedzv

この問題は、指を押したままにした場合にも発生します（つまり、勢いをつけて離したときだけでなく）：キャレットがスクロールに失敗します。

明らかに、オーバーフロースクロールをオフにしたくありません。正しくスクロールするようにキャレットを修正する方法がない場合は、非表示にしても問題ありません。

ありがとう

iosscrolltouchmobile-safaricaret
16
gabrielmaldi

これは確かにWebKitのバグであり、既知の回避策はないようです。

@cvrebert filed バグ：

11
gabrielmaldi

これと同じ問題がありましたが、私の修正は

-webkit-overflow-scrolling: touch

そして

-webkit-overflow-scrolling: auto

入力に焦点を合わせる/ぼかすときはいつでも

4
Shakks

私はこれを理解しようと多くの時間を費やしましたが、ここで述べた他のアイデアでは成功しませんでした。

私が気づいたことの1つは、カーソルが入力の外側に浮かんでいる場合でも、画面キーボードで入力を開始すると、カーソルが正しい位置に戻ることです。

これは私にアイデアを与えました-おそらくいくつかのJSコードを使用することで、入力の値を変更し、すぐに現在の値に戻すことができます。おそらくこれにより、手動入力を行うときと同じようにカーソルが整列します。

私はそれをテストしました、そしてそれは働きました。コードは次のようになります。

       myIScroll.scrollToElement(element, scrollTime); // any scroll method call
       var scrollTime = 400;
       if (element.type && element.type == 'text') {
          var currentValue = $(element).val();
          $timeout(function(){
            $(element).val(currentValue + 'a').val(currentValue);
          }, scrollTime);
        }
2
jserle

私が見つけた唯一の回避策-テキストタイプの入力がフォーカスされているかどうかを確認するためのスクロールイベントで、他の要素（ボタンなど）にフォーカスを設定します。その結果、仮想キーボードとカーソルが消えます。このソリューションは完璧ではありませんが、フォームの上にカーソルがある場合ほどひどくは見えません。例：

$(".scrollContainer").scroll(function () {
  var selected = $("input[type='text']:focus");
  if (selected.length > 0) {
      $('#someButton').focus();
  }
}
2
Igor Yakhnitskyy

これは確かに新しくリリースされたiOS11のバグです。cssを変更することでモーダルの問題を解決しました。

.modal {
  position:fixed;
  overflow-y: scroll;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
}

body {
  height: 100%;
  width:100%;
  overflow: hidden;
  position:fixed;
}
2
Prasanna Jathan

選択を削除して再度設定することで、問題を修正できます。ここでjQueryを使用するのは、そのためのJavascriptです。編集モードに入るときにイベントハンドラーを追加します。

        $(document).on('scroll.inline-edit', function(event) {
            var selection = window.getSelection();
            if (selection.rangeCount) {
                var range = selection.getRangeAt(0);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        });

編集モードを終了すると、イベントハンドラーが削除されます。

        $(document).off('scroll.inline-edit');

これは、イベントハンドラーが常に有効になっている場合にも機能する可能性があります。

1
hjhlarsen

これは少し前のことで、IOS11.xで修正されたと思います。もちろん、古いバージョンをサポートする必要があります。上記の提案からヒントが得られましたが、セットアップでは機能しませんでした。 onFocusを使用して、現在フォーカスされているフィールドに文字を追加/削除する遅延関数をトリガーしました。フラットなangularJS/iOSハイブリッドを使用しています。

私のhtml側で

... setting up my form
<div ng-repeat="item in curReading.items"  >
      <label>{{item.lbl}}</label>
      <input type="text"
       ng-model="item.value"
       class="form-control"   
       onFocus="if(Tweak4IOS == 1) setTimeout(pirouette_4_IOS, 1000);"
           placeholder="Enter Title"
          />
   </div>

私のJS側では、関連するコードは

function pirouette_4_IOS()
{
  try
  {

    document.activeElement.value += 'x';
    document.activeElement.value = document.activeElement.value.slice(0,-1);
  }
  catch(err)
  {
    alert(err.message);
  }
  finally
  {
    Tweak4IOS = 0;
  }
}  // --- end of pirouette_4_IOS---
...
var Tweak4IOS = 0; // init the flag

最後に、Obj-Cでキーボードポップにvarを設定しました

- (void)keyboardDidShow:(NSNotification *)sender {
CGRect frame = [sender.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];

homeWeb.frame = CGRectMake(homeWeb.frame.Origin.x, homeWeb.frame.Origin.y,
                           homeWeb.frame.size.width , homeWeb.frame.size.height - frame.size.height     );

self.pinBottom2.constant = frame.Origin.y;

// set the JS var so it is done only when keyboard pops initially
[homeWeb stringByEvaluatingJavaScriptFromString:@"Tweak4IOS=1;"];
0
becker

私はjQuery.animateを使用してウィンドウをスクロールしていますが、jQuery.animateを使用していない場合にこれが機能するかどうかはわかりませんが、機能しました。要素の「ぼかし」ハンドラーをトリガーしているだけで、実際には要素のフォーカスが失われることはありません。ユーザーの操作によって自然にトリガーされたかのように、ハンドラーがトリガーされます。そうみたいです ：

$content.animate(
    {
        scrollTop: $(this).data('originalTop')
    }, 
    {
        duration: 100,
        easing: 'swing',
        always: function(){
            var $t = $(this);
            $t.trigger('blur');
        }
    }
);

IOSのその他の奇妙な点のため、フォームの読み込み時に要素のoffset（）。top値をoriginalTopとして保存する必要があります。 $ contentは、フォームを含むスクロール可能なdivです。例：$（ 'div＃content'）。

0
minorgod

これは、iOS11でもiOS11の-webkit-overflow-scrolling:touchでWebkitフォームを悩ませているようです。上記の回答に基づいており、キャレットのinputまたはtextearea要素に焦点を当てる必要があるためです。場違いに見えるように、これが私自身のアプローチで「修正」します

$('input').on("focus", function(){
    var scrollTopVal =  $(elementSelector).scrollTop();
    $(elementSelector).scrollTop(scrollTopVal + 1);
    $(elementSelector).scrollTop(scrollTopVal);
})

ここで、elementSelectorは入力要素のコンテナ要素を指します。

0
jcage

かなり古いionic/cordovaアプリケーションで、これで頭を壁にぶつけました。

IOSでは、キャレットはいたるところにあり、入力フィールド/フォームはほとんど使用できませんでした。

IOS 8以降廃止されたデフォルトのUIWebViewではなく、WKWebViewを使用することにしました。すぐに作業します。キーボードプラグインも更新することを忘れないでください。

今日の時点で、私たちが使用しているionic v1アプリケーション：

[email protected]
[email protected]
0
vivien.destpern