logo标签列表

在iOS设备上使用手指滚动输入标签

htmlioscss
8

我在网站上有一个基本表单，其中包含一些输入字段。

如果用户尝试滚动页面，并通过在输入框中放置手指开始滚动，则将不允许页面滚动。

如果他们在正文的某个位置开始滚动，则页面可以正常滚动。

这似乎与这位先生遇到的问题相同，但他说之前的开发人员故意实现了这一点，而我绝对没有这个问题。

输入字段阻止iPhone上的页面滚动

有什么想法吗？

我们需要一个演示/代码。 - Daij-Djan
我很快会提供一个演示。我的代码已经相当简单了，但我将其剪裁成了一个非常小的示例，然后事情开始工作了。我需要找出是哪个部分导致它不能工作。今天应该会有结果。 - corbin
请看我的答案，包括示例代码和解决方案。 - corbin
顺便说一句，当输入框获得焦点并弹出软键盘时，我可以开始在其顶部滚动，但如果没有已经聚焦且显示键盘的输入框，则无法在其顶部开始滚动。 - corbin
我们需要看到你的代码！！ - ZEE
显示剩余2条评论
4个回答
2
html { 
  overflow: scroll; 
  -webkit-overflow-scrolling: touch;
}

适用于 input 元素和 iframe 元素。 触摸事件解决了滚动问题，但会禁用这些元素上的焦点事件。

1
我的代码经过简化后，大致是这样的：

html:

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, target-densitydpi=medium-dpi" />
        <title>Broken Input Scrolling</title>
        <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
        <script src="jquery.js"></script>
        <script src="jquery.mobile-1.4.5.min.js"></script>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>

    <div data-role="page" id="outerDiv">
        <div data-role="header">
            <h1>Broken Input Scrolling</h1>
        </div>

        <div data-role="content" id="contentDiv">
            <div id="tableDiv">
                <table>
                    <tbody>
                        <tr>
                            <td name="nameTitle" id="nameTitle" class="input-row3"><span>Scenario Name</span></td>
                            <td><input type="email" name="name1" id="name1" placeholder="Scenario 1"/></td>
                            <td><input type="email" name="name2" id="name2" placeholder="Scenario 2"/></td>
                            <td><input type="email" name="name3" id="name3" placeholder="Scenario 3"/></td>
                            <td><input type="email" name="name4" id="name4" placeholder="Scenario 4"/></td>
                            <td><input type="email" name="name5" id="name5" placeholder="Scenario 5"/></td>
                            <td><input type="email" name="name6" id="name6" placeholder="Scenario 6"/></td>
                            <td><input type="email" name="name7" id="name7" placeholder="Scenario 7"/></td>
                            <td><input type="email" name="name8" id="name8" placeholder="Scenario 8"/></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript">
       app.initialize();
    </script>

    </body>
</html>

css：

table {
    width: 90em;
    table-layout:fixed;
}
td {
    height: 3em;
    width: 10em;
    border: 0.1em solid black;
}
#tableDiv {
    overflow-x: auto !important;
}
#tableDiv > * {
    -webkit-transform: translate3d(0,0,0);
}

原来删除这一部分可以解决问题：
#tableDiv > * {
    -webkit-transform: translate3d(0,0,0);
}

这是不必要的，但在真正的项目（更大）中早些时候添加了它，当时试图改进滚动效果。
我不知道为什么这会对iOS造成问题而对Android没有影响。如果有人可以填补关于为什么会发生这种情况的细节（因此提供更好的答案），他们可以得到一些奖励。
顺便说一下...如果使用足够大的屏幕无需滚动，则需要添加更多行或更宽的行。
0
一个解决此问题的方法可能是：
function setTextareaPointerEvents(value) {
    var nodes = document.getElementsByTagName('textarea');
    for(var i = 0; i < nodes.length; i++) {
        nodes[i].style.pointerEvents = value;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    setTextareaPointerEvents('none');
});

document.addEventListener('touchstart', function() {
    setTextareaPointerEvents('auto');
});

document.addEventListener('touchmove', function() {
    e.preventDefault();
    setTextareaPointerEvents('none');
});

document.addEventListener('touchend', function() {
    setTimeout(function() {
        setTextareaPointerEvents('none');
    }, 0);
});

这将使移动版Safari（其他浏览器尚未测试）忽略文本区域的滚动，但允许像往常一样设置焦点等。

查看我的答案（不完整的答案）以获取代码示例和导致问题的原因（尽管我不知道为什么）。使用我的代码，在没有输入聚焦且软键盘隐藏的情况下开始touchmove将被忽略。但是，如果您在键盘弹出后在输入上开始touchmove，则会起作用。使用您的代码，无论键盘是否弹出，都将忽略在输入顶部开始touchmove。实际上，我希望在两种情况下都能正常滚动，而不是在两种情况下都禁用它。 - corbin
1
你从https://dev59.com/L1HTa4cB1Zd3GeqPVeEv复制了这段代码。你至少应该提供一个引用来源。此外，这段代码被复制的地方明确表示它禁用了滚动。但是我和@Captianlonate希望滚动正常工作。 - corbin
0

您可以尝试以下代码来防止在触摸移动时输入

$(document).on('touchmove','input',function(e){
      e.preventDefault();
});
我和原帖作者都不想禁用touchmove。 - corbin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接