移动 Safari - 输入插入符号不会随着溢出滚动:触摸而滚动 - Mobile Safari - Input caret does not scroll along with overflow-scrolling: touch 小贝子编程网

我知道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

当您按住手指时（即不仅在给予它动力和释放时），也会发生此问题：插入符号无法滚动。

显然我不想关闭溢出滚动，如果没有办法修复插入符号以便它可以正确滚动，可以隐藏它。

谢谢

这确实是一个 WebKit 错误，似乎没有已知的解决方法。

@cvrebert提交了错误：

网络工具包：https://bugs.webkit.org/show_bug.cgi?id=138201
苹果雷达：http://openradar.appspot.com/18819624

有同样的问题，我的修复程序正在

-webkit-overflow-scrolling: touch

和

-webkit-overflow-scrolling: auto

每当我聚焦/模糊输入时

这确实是新发布的iOS 11上的一个错误.我通过更改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;
}

我只找到了一种解决方法 - 在滚动事件中检查带有类型文本的输入是否聚焦，将焦点设置在其他元素上（例如，在按钮上）。结果，虚拟键盘和光标将消失。这个解决方案并不完美，但它看起来并不像表单顶部的光标那么可怕。例：

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

我花了很多时间试图弄清楚这一点，但这里提到的其他想法都没有成功。

我注意到的一件事是，即使光标会漂浮在输入之外，一旦您开始在屏幕键盘上键入，光标也会回到正确的位置。

这给了我一个想法 - 也许通过使用一些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);
        }

您可以通过删除所选内容并重新设置来解决此问题。在这里使用 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');

如果始终启用事件处理程序，这可能也会起作用。

我正在使用jQuery.animate来滚动窗口，如果您不使用jQuery.animate，我不确定这是否有效，但它对我有用。我只是触发元素上的"blur"处理程序，这实际上并不会导致元素失去焦点，它只是触发处理程序，就好像它们是由用户交互自然触发的一样。似乎：

$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'）。

这

似乎仍然困扰着iOS中的webkit表单，-webkit-overflow-scrolling:touch，也在iOS 11中。基于上面的答案，并且由于需要聚焦一个input或textearea元素才能使插入符号显得不合适，这是我自己的"纠正"方法

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

其中elementSelector指向输入元素的容器元素。

这是不久前的事情，我认为它在 IOS11.x 上已修复，当然我们仍然需要支持旧版本，上面的建议给了我一个提示，但它们都不起作用 4 我的设置。我使用 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;"];

在一个相当古老的离子/科尔多瓦应用程序中用这个把我的头撞在墙上。

在iOS上，插入符号到处都是，输入字段/表单几乎无法使用。

我们决定使用WKWebView，而不是自iOS 8以来弃用的默认UIWebView。砰！立即工作。不要忘记更新您的键盘插件。

截至今天，对于我们的 ionic v1 应用程序，我们使用：

cordova-plugin-ionic-keyboard@2.1.3
cordova-plugin-ionic-webview@2.2.0

移动 Safari - 输入插入符号不会随着溢出滚动:触摸而滚动

相关内容

最新更新

热门标签：