我正在使用iScroll提供iPhone风格的滚动效果。但是,当点击文本框时,键盘不会弹出。
在尝试找到可能的原因时,我发现删除iScroll脚本可以使其正常工作,但在这种情况下,我会失去滚动功能。
这是iScroll的一个bug吗?如果是,有没有经过测试的解决方法?或者是否有iScroll的替代品?
提前感谢。
我正在使用iScroll提供iPhone风格的滚动效果。但是,当点击文本框时,键盘不会弹出。
在尝试找到可能的原因时,我发现删除iScroll脚本可以使其正常工作,但在这种情况下,我会失去滚动功能。
这是iScroll的一个bug吗?如果是,有没有经过测试的解决方法?或者是否有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
和scroller
的CSS时,键盘弹出了...但是如果保留它们,键盘就不起作用。我使用了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;
}
},
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;
}
}