我正在使用 iScroll 来提供 iPhone 风格的滚动。但是,当点击文本框时,键盘不会出现。
在尝试查找可能的原因时,我发现删除iScroll
脚本使其正常工作,但在这种情况下我错过了滚动功能。
这是 iScroll 中的错误吗?如果是,是否有经过测试的解决方法?或者 iScroll 有什么替代品吗?
提前致谢。
我正在使用 iScroll 来提供 iPhone 风格的滚动。但是,当点击文本框时,键盘不会出现。
在尝试查找可能的原因时,我发现删除iScroll
脚本使其正常工作,但在这种情况下我错过了滚动功能。
这是 iScroll 中的错误吗?如果是,是否有经过测试的解决方法?或者 iScroll 有什么替代品吗?
提前致谢。
至少在 iScroll 4 中,您可以添加此代码以启用单击输入字段。请参阅示例文件夹中有关表单字段的演示。
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
useTransform: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
我能够解决错误。问题出在 CSS 上。
我认为可能是 CSS 以某种方式造成了问题。我得出的结论是,当我为wrapper
and评论 CSS 时scroller
,键盘出现了……但是保留它们,键盘不起作用。我正在使用bottom: 0px;
,这似乎以某种方式阻止了键盘显示。
删除bottom: 0px;
解决了我的问题。
希望这对其他人有帮助。
我相信这个解决方案是最优的 调整 iscroll.js 中的代码,(如下)
onBeforeScrollStart: function (e) {
//e.preventDefault();
if (e.target.nodeName.toLowerCase() == "select" || e.target.tagName.toLowerCase() == 'input' || e.target.tagName.toLowerCase() == 'textarea'){
return;
}
},
我在 iScroll 4.2 的 _start 中添加了以下代码来解决这个问题:
if (e && e.target && e.target.tagName) {
var bFocusField = ('|INPUT|TEXTAREA|BUTTON|SELECT|'
.indexOf('|' + e.target.tagName + '|') >= 0);
if (bFocusField || that.focusField) {
if (bFocusField) {
that.focusField = e.target;
} else {
that.focusField.blur();
that.focusField = null;
}
e.defaultPrevented = false;
e.returnValue = true;
return true;
}
}
代码插入函数的初始化部分下方(that.moved = false; ... that.dirY = 0;)。
在 iPad 1 (iOS 5.1) 和 iPad 3 (iOS 6) 上进行了测试。屏幕键盘似乎不会干扰 iScroll(我每 5 秒执行一次 iScroll.refresh())。