проблема с прокруткой с помощью встроенного элемента управления датой для iPhone

Question

проблема с прокруткой с помощью встроенного элемента управления датой для iPhone

0

В мобильной веб-форме мы использовали собственный селектор времени. Когда я проверяю приложение на 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>

Dinesh 04 дек. 2013, в 22:44

Источник

Теги:

jquery

datetime

iphone

input

1 ответ

Ещё вопросы

Dinesh · Accepted Answer · 2013-12-05T13-59-00.000Z

Исправлена эта проблема, отслеживая положение прокрутки моей веб-формы. пожалуйста, предложите, если есть лучшее решение.

Вот обновленный код

<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>