Famo.us：如何将表单字段放入适用于 iOS 和 Safari 的滚动视图中？

Question

我正在尝试使用 Famous ScrollView 为移动网络应用程序创建滚动表单。但是，iOS 在键盘处于活动状态时滚动时会出现严重的显示错误。是否使用 InputSurface or embedding an <input> directly in the Surface HTML.

会发生这种情况

实现支持 Mobile Safari 的可滚动输入表单的最佳方法是什么？

（下面复制了 JSFiddle 代码；要查看错误，请点击文本字段，然后在键盘处于活动状态时尝试滚动。）

Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Surface = Famous.Core.Surface;
    var Scrollview = Famous.Views.Scrollview;
    var Transform = Famous.Core.Transform;

    var mainContext = Engine.createContext();

    var scrollview = new Scrollview();
    var surfaces = [];

    scrollview.sequenceFrom(surfaces);

    var inputhtml = '<div><input type="text" value="test: edit me" /></div>';

    for (var i = 0, temp; i < 40; i++) {
        temp = new Surface({
            content: inputhtml,
            size: [undefined, 200],
            properties: {
                backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                lineHeight: "200px",
                textAlign: "center"
            },
            index: i
        });

        temp.pipe(scrollview);
        surfaces.push(temp);
    }
    mainContext.add(scrollview);
});

Answer 1

问题是著名的滚动视图不是真正可滚动的，他们为组设置动画以使其看起来平滑，并添加 pull to refresh effect.

这个问题的解决方案：没有真正直接和巧妙的解决方案，因为 iOS 键盘动画将始终聚焦于输入，另一方面famous 使用一个像滚动条一样工作的隐藏指示器，这与 iOS 焦点算法冲突，所以唯一可能的解决方案是 famous 改变他们动画滚动视图的方式。

解决方法：

幸好有解决方法，如果用户滚动离开输入这意味着他们可能不再对输入文本感兴趣，所以我们滚动视图后可以模糊目标输入。
经过大量搜索后，我并没有真正找到 famous 的严格事件来指示滚动开始事件，但是变异观察器工作得很好，达到了要求的结果。

Famo.us ScrollView MouseOver - jsFiddle demo

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">


      <link rel="stylesheet" type="text/css" href="https://rawgit.com/jperl/famous-compiled/e9c12b1fa657820d3f9bad093ea72e8ee2dfec46/dist/lib/famous/core/famous.css">



      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
      <script type="text/javascript" src="http://rawgit.com/jperl/famous-compiled/e9c12b1fa657820d3f9bad093ea72e8ee2dfec46/dist/src/4f231991.polyfills.js"></script>

      <script type="text/javascript" src="https://rawgit.com/jperl/famous-compiled/97f85aaa64af255adfe0407c941e0e859b0759bc/dist/src/804b0adb.main.js"></script>


  <style>
    input { font-size: 40px; }
  </style>



<script type="text/javascript">
var observer;
window.onload=function(){
Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Surface = Famous.Core.Surface;
    var Modifier = Famous.Core.Modifier;
    var Scrollview = Famous.Views.Scrollview;
    var Transform = Famous.Core.Transform;

    var mainContext = Engine.createContext();

    var scrollview = new Scrollview();
    var surfaces = [];

    scrollview.sequenceFrom(surfaces);

    var inputhtml = '<div><input type="text" value="test: edit me" /></div>';

    for (var i = 0, temp; i < 40; i++) {
        temp = new Surface({
            content: inputhtml,
            size: [undefined, 200],
            properties: {
                backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                lineHeight: "200px",
                textAlign: "center"
            },
            index: i
        });

        temp.pipe(scrollview);
        surfaces.push(temp);
    }
    mainContext.add(scrollview);

});
$("body").on("focus","input",function(){Observe($(this));});
$("body").on("blur","input",function(){endObserver();})
}


function Observe(event_input)
{
  var target = document.querySelector('.famous-group');

// create an observer instance
observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    event_input.blur();
    console.log(mutation.oldValue);
  });    
});

// configuration of the observer:
var config = { attributes: true, attributeOldValue: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);
}
function endObserver()
{
  observer.disconnect();
}

</script>


</head>
<body>
</body>

</html>

实例可以在我的 page

上找到

Answer 2

此代码似乎通过强制重绘文本区域来解决此问题。

<style>
    input.force-redraw {
      text-shadow: rgba(0,0,0,0) 0px 0px 0px;
    }
</style>
<script>
    setInterval(function(){ 
        $('input').toggleClass('force-redraw');
    }, 10);
</script>

更新小提琴： http://jsfiddle.net/byC98/87/ http://jsfiddle.net/byC98/88/

不幸的是，这更像是一个黑客而不是一个修复:(

CPU 旧笔记本电脑的利用率：

这是 https://github.com/cubiq/iscroll/issues/178#issuecomment-11941817

中 rooby 代码的修改版本

Famo.us：如何将表单字段放入适用于 iOS 和 Safari 的滚动视图中？

Famo.us: How to put form fields inside a scrolling view that works on iOS and Safari?

javascript

mobile-safari

famo.us

Famo.us：如何将表单字段放入适用​​于 iOS 和 Safari 的滚动视图中？

Famo.us: How to put form fields inside a scrolling view that works on iOS and Safari?

javascript

mobile-safari

famo.us

Famo.us：如何将表单字段放入适用于 iOS 和 Safari 的滚动视图中？