使用IPhone本机日期选择控件滚动问题

时间：2013-12-04 21:04:22

标签： jquery iphone datetime input

在移动网络表单中，我们使用了原生日期时间选择器控件。当我在iPhone中检查应用程序时，功能正常。但表格显示有问题。只要我点击日期时间控件，它就会在表单底部显示本机控件，并将表单向上推到地址/ URL栏下方。一旦我选择了日期并点击完成按钮，该表格应该回到它的原始位置，但我的表格没有回到原来的位置。我不确定我的代码有什么问题。我不得不刷新页面才能把它带回来。

以下是我为重现此问题而创建的示例应用。有人可以帮我纠正这个问题。

    <html>
<head>
    <title>Sample - Datatime local IPhone</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <meta  name = "viewport" content = "width=device-width, initial-scale = 1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript" language = "javascript">
        $(function () {
            var isStandalone = window.navigator.standalone,
            parentDIV = $('.setsize'),
            height = window.screen.height - 20
            parentDIV.css('overflow', 'scroll');
            if (isStandalone) {
                parentDIV.css('height', height + 'px');
                parentDIV.css('background-color', 'Red');
            }
            else {
                parentDIV.css('height', height - 40 + 'px');
                parentDIV.css('background-color', 'Navy');
            }  
        });
    </script> 
</head>
<body>
    <div class="setsize">
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="TestDateTimeNative" value="2010-01-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="TestDateTimeNative1" value="2010-02-13T20:00" />
        </div> 
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local17" value="2010-03-13T20:00" />
        </div> 
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local18" value="2010-04-13T20:00" />
        </div> 
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local19" value="2010-05-13T20:00" />
        </div> 
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local20" value="2010-06-13T20:00" />
        </div> 
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local21" value="2010-07-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local1" value="2010-08-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local2" value="2013-09-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local3" value="2010-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local4" value="2013-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local5" value="2010-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local6" value="2013-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local7" value="2010-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local8" value="2013-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local9" value="2010-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local10" value="2013-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local11" value="2010-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local12" value="2013-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local13" value="2010-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local14" value="2013-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local15" value="2010-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local16" value="2013-11-13T20:00" />
        </div>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

通过跟踪网络表单的滚动位置来解决此问题。如果有更好的解决方案，请提出建议。

这是更新后的代码

<html>
<head>
    <title>Sample - Datatime local IPhone</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <meta  name = "viewport" content = "width=device-width, initial-scale = 1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript" language = "javascript">
        $(function () {
            var isStandalone = window.navigator.standalone,
            parentDIV = $('.setsize'),
            height = window.screen.height - 20,
            top = document.body.scrollTop,
            handleDateChange = function () {
                var newtop = document.body.scrollTop;
                document.body.scrollTop = top;
                alert('New Top : ' + newtop);
            }
            alert('Top : ' + top);
            parentDIV.css('overflow', 'scroll');
            if (isStandalone) {
                parentDIV.css('height', height + 'px');
                parentDIV.css('background-color', 'Red');
            }
            else {
                parentDIV.css('height', height - 40 + 'px');
                parentDIV.css('background-color', 'Navy');
            }
            $('.job-time-editor').on('blur', handleDateChange);
        });
    </script> 
</head>
<body>
    <div class="setsize">
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="TestDateTimeNative" value="2010-01-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="TestDateTimeNative1" value="2010-02-13T20:00" 

/>
        </div> 
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local17" value="2010-03-13T20:00" />
        </div> 
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local18" value="2010-04-13T20:00" />
        </div> 
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local19" value="2010-05-13T20:00" />
        </div> 
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local20" value="2010-06-13T20:00" />
        </div> 
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local21" value="2010-07-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local1" value="2010-08-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local2" value="2013-09-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local3" value="2010-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local4" value="2013-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local5" value="2010-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local6" value="2013-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local7" value="2010-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local8" value="2013-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local9" value="2010-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local10" value="2013-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local11" value="2010-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local12" value="2013-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local13" value="2010-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local14" value="2013-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local15" value="2010-11-13T20:00" />
        </div>
        <div>
            <input type="DateTime-Local" class="job-time-editor" id="DateTime-Local16" value="2013-11-13T20:00" />
        </div>
    </div>
</body>
</html>
相关问题
最新问题