Выпадающий список выбора html скрывается после перетаскивания полосы прокрутки с помощью мыши в приложении windows 10 cordova

Я готовлю мобильное приложение Cordova для Windows 10.

Описание проблемы: Для огромных (> 30) параметров в HTML-выборе, если я перетаскиваю полосу прокрутки, чтобы выбрать нижние параметры, раскрывающееся меню выбора закрывается после отпускания левой кнопки мыши (приложение обрабатывает его, когда я щелкнул за пределами выбора). Я подготовил простое приложение Cordova для html windows 10 без jquery mobile, где оно отлично работает для windows10. Но если я добавлю jquery mobile, он не будет работать должным образом. Select работает нормально в браузерах, Android, ios, проблема только в приложении windows10 cordova.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
<head>
    	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.theme-1.4.5.min.css" type="text/css" media="screen" title="no title" charset="utf-8" />
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" type="text/css" media="screen" title="no title" charset="utf-8" />
		<script type="text/JavaScript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   
</head>
<body>
    <br>
    <select >
        <option value="">Select (Huge)</option>
        <option value="LS">TRANSFORMER VAULT - STAIRS</option>
        <option value="M4">UTILITY ROOM - 4TH</option>
        <option value="M5">UTILITY ROOM - 5TH</option>
        <option value="M2">UTILITY ROOM - 2ND</option>
        <option value="LR">TRANSFORMER VAULT - RIGHT</option>
        <option value="M3">UTILITY ROOM - 3RD</option>
        <option value="LB">TRANSFORMER VAULT - BACK</option>
        <option value="LF">TRANSFORMER VAULT - FRONT</option>
        <option value="LL">TRANSFORMER VAULT - LEFT</option>
        <option value="LI">TRANSFORMER VAULT - BARN</option>
        <option value="LO">TRANSFORMER VAULT - OUTSIDE</option>
        <option value="LP">TRANSFORMER VAULT - POLE</option>
        <option value="M1">UTILITY ROOM - 1ST</option>
        <option value="LN">TRANSFORMER VAULT - NORTH</option>
        <option value="MT">UTILITY ROOM - REAR</option>
        <option value="MR">UTILITY ROOM - RIGHT</option>
        <option value="N3">CLOSET - 3RD</option>
        <option value="MS">UTILITY ROOM - STAIRS</option>
        <option value="MW">UTILITY ROOM - WEST</option>
        <option value="MZ">UTILITY ROOM - UNKNOWN</option>
        <option value="NB">CLOSET - BACK</option>
        <option value="ME">UTILITY ROOM - EAST</option>
        <option value="MB">UTILITY ROOM - BACK</option>
        <option value="MI">UTILITY ROOM - BARN</option>
        <option value="MF">UTILITY ROOM - FRONT</option>
        <option value="ML">UTILITY ROOM - LEFT</option>
        <option value="MP">UTILITY ROOM - POLE</option>
        <option value="N1">CLOSET - 1ST</option>
        <option value="MQ">UTILITY ROOM - SOUTH</option>
        <option value="N2">CLOSET - 2ND</option>
        <option value="MN">UTILITY ROOM - NORTH</option>
        <option value="MO">UTILITY ROOM - OUTSIDE</option>
        <option value="NS">CLOSET - STAIRS</option>
        <option value="O4">OUTSIDE - 4TH</option>
        <option value="NT">CLOSET - REAR</option>
        <option value="NZ">CLOSET - UNKNOWN</option>
        <option value="OB">OUTSIDE - BACK</option>
        <option value="NE">CLOSET - EAST</option>
        <option value="NF">CLOSET - FRONT</option>
        <option value="NL">CLOSET - LEFT</option>
        <option value="NR">CLOSET - RIGHT</option>
        <option value="NP">CLOSET - POLE</option>
        <option value="O1">OUTSIDE - 1ST</option>
        <option value="OW">OUTSIDE - WEST</option>
        <option value="OT">OUTSIDE - REAR</option>
        <option value="OZ">OUTSIDE - UNKNOWN</option>
        <option value="PB">PORCH - BACK</option>
        <option value="OF">OUTSIDE - FRONT</option>
        <option value="OE">OUTSIDE - EAST</option>
        <option value="OI">OUTSIDE - BARN</option>
        <option value="ON">OUTSIDE - NORTH</option>
        <option value="OO">OUTSIDE - OUTSIDE</option>
        <option value="OL">OUTSIDE - LEFT</option>
        <option value="OR">OUTSIDE - RIGHT</option>
        <option value="OS">OUTSIDE - STAIRS</option>
        <option value="OP">OUTSIDE - POLE</option>
        <option value="P1">PORCH - 1ST</option>
        <option value="OQ">OUTSIDE - SOUTH</option>
        <option value="PZ">PORCH - UNKNOWN</option>
        <option value="A1">ATTIC - 1ST</option>
        <option value="A4">ATTIC - 4TH</option>
        <option value="A3">ATTIC - 3RD</option>
        <option value="STR">Near Street</option>
        <option value="PF">PORCH - FRONT</option>
        <option value="PL">PORCH - LEFT</option>
        <option value="PO">PORCH - OUTSIDE</option>
        <option value="PP">PORCH - POLE</option>
        <option value="PS">PORCH - STAIRS</option>
        <option value="PT">PORCH - REAR</option>
        <option value="PR">PORCH - RIGHT</option>
        <option value="AF">ATTIC - FRONT</option>
        <option value="AL">ATTIC - LEFT</option>
        <option value="LEFT">Left side of house</option>
        <option value="AP">ATTIC - POLE</option>
        <option value="B1">BATHROOM - 1ST</option>
        <option value="B2">BATHROOM - 2ND</option>
        <option value="RF">UNDER HOUSE - FRONT</option>
        <option value="1">1</option>
        <option value="B3">BATHROOM - 3RD</option>
        <option value="2">2</option>
        <option value="QL">UNDER COUNTER - LEFT</option>
        <option value="10">10</option>
        <option value="AB">ATTIC - BACK</option>
        <option value="QR">UNDER COUNTER - RIGHT</option>
        <option value="BI">BATHROOM - BARN</option>
        <option value="RZ">UNDER HOUSE - UNKNOWN</option>
        <option value="RW">UNDER HOUSE - WEST</option>
        <option value="BL">BATHROOM - LEFT</option>
        <option value="C2">CELLAR - 2ND</option>
        <option value="SB">STAIRS - BACK</option>
        <option value="BR">BATHROOM - RIGHT</option>
        <option value="C3">CELLAR - 3RD</option>
        <option value="BP">BATHROOM - POLE</option>
        <option value="C1">CELLAR - 1ST</option>
        <option value="SF">STAIRS - FRONT</option>
        <option value="C4">CELLAR - 4TH</option>
        <option value="BT">BATHROOM - REAR</option>
        <option value="C5">CELLAR - 5TH</option>
        <option value="RL">UNDER HOUSE - LEFT</option>
        <option value="BB">BATHROOM - BACK</option>
        <option value="RR">UNDER HOUSE - RIGHT</option>
        <option value="S1">STAIRS - 1ST</option>
        <option value="BE">BATHROOM - EAST</option>
        <option value="RS">UNDER HOUSE - STAIRS</option>
        <option value="CI">CELLAR - BARN</option>
        <option value="CN">CELLAR - NORTH</option>
        <option value="CO">CELLAR - OUTSIDE</option>
        <option value="CL">CELLAR - LEFT</option>
        <option value="CR">CELLAR - RIGHT</option>
        <option value="CS">CELLAR - STAIRS</option>
        <option value="CP">CUSTOMER POLE</option>
        <option value="D1">PUMPHOUSE - 1ST</option>
        <option value="CQ">CELLAR - SOUTH</option>
        <option value="TB">OFFICE - BACK</option>
        <option value="CW">CELLAR - WEST</option>
        <option value="CT">CELLAR - REAR</option>
        <option value="D5">PUMPHOUSE - 5TH</option>
        <option value="TF">OFFICE - FRONT</option>
        <option value="BZ">BATHROOM - UNKNOWN</option>
        <option value="SN">STAIRS - NORTH</option>
        <option value="SO">STAIRS - OUTSIDE</option>
        <option value="CB">CELLAR - BACK</option>
        <option value="SR">STAIRS - REAR</option>
        <option value="SS">STAIRS - STAIRS</option>
        <option value="SP">STAIRS - POLE</option>
        <option value="T1">OFFICE - 1ST</option>
        <option value="T2">OFFICE - 2ND</option>
        <option value="CF">CELLAR - FRONT</option>
        <option value="T5">OFFICE - 5TH</option>
        <option value="CE">CELLAR - EAST</option>
        <option value="DL">PUMPHOUSE - LEFT</option>
        <option value="DO">PUMPHOUSE - OUTSIDE</option>
        <option value="DP">PUMPHOUSE - POLE</option>
        <option value="E1">SWIMMING POLE - 1ST</option>
        <option value="DN">PUMPHOUSE - NORTH</option>
        <option value="DT">PUMPHOUSE - REAR</option>
        <option value="DR">PUMPHOUSE - RIGHT</option>
        <option value="DW">PUMPHOUSE - WEST</option>
        <option value="CZ">CELLAR - UNKNOWN</option>
        <option value="TL">OFFICE - LEFT</option>
        <option value="TO">OFFICE - OUTSIDE</option>
        <option value="TP">OFFICE - POLE</option>
        <option value="TT">OFFICE - REAR</option>
        <option value="DB">PUMPHOUSE - BACK</option>
        <option value="TR">OFFICE - RIGHT</option>
        <option value="DF">PUMPHOUSE - FRONT</option>
        <option value="EP">SWIMMING POLE - POLE</option>
        <option value="EO">SWIMMING POLE - OUTSIDE</option>
        <option value="GARG">In garage</option>
        <option value="UP">BEDROOM - POLE</option>
        <option value="UR">BEDROOM - RIGHT</option>
        <option value="FN">FIELD - NORTH</option>
        <option value="FL">FIELD - LEFT</option>
        <option value="FQ">FIELD - SOUTH</option>
        <option value="FR">FIELD - RIGHT</option>
        <option value="FO">FIELD - OUTSIDE</option>
        <option value="FP">FIELD - POLE</option>
        <option value="G1">GARAGE - 1ST</option>
        <option value="FS">FIELD - STAIRS</option>
        <option value="FT">FIELD - REAR</option>
        <option value="FZ">FIELD - UNKNOWN</option>
        <option value="FW">FIELD - WEST</option>
        <option value="FB">FIELD - BACK</option>
        <option value="FE">FIELD - EAST</option>
        <option value="FF">FIELD - FRONT</option>
        <option value="FI">FIELD - BARN</option>
        <option value="GN">GARAGE - NORTH</option>
        <option value="GO">GARAGE - OUTSIDE</option>
        <option value="GL">GARAGE - LEFT</option>
        <option value="GR">GARAGE - RIGHT</option>
        <option value="H3">HALL - 3RD</option>
        <option value="H4">HALL - 4TH</option>
        <option value="GP">GARAGE - POLE</option>
        <option value="H1">HALL - 1ST</option>
        <option value="H2">HALL - 2ND</option>
        <option value="GT">GARAGE - REAR</option>
        <option value="H5">HALL - 5TH</option>
        <option value="GZ">GARAGE - UNKNOWN</option>
       
       
    </select>
       
</body>
</html>

Без Jquery mobile я решил проблему, изменив стили во время выполнения. Но мне также нужен мобильный JQuery для моего проекта.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
<head>       	
    <script>
          // Should only call edgeSelectHelper if we are in Winodws 10 (not Android or iOS)
          $(document).ready(edgeSelectHelper);

          function edgeSelectHelper() { 
		  
                // When any long select gets focus, convert it to a list
                $("select").focus( function(maxOptions) {
                                    if ($(this).find("option").length <= 30) return;
                                    var pos = $(this).offset();
                                    var width = $(this).css("width");
                                    $(this).css("position", "absolute");
                                    $(this).css("zIndex", 9999);
                                    $(this).offset(pos);
                                    $(this).css("width", width);
                                    $(this).attr("size", 30);
                                });

                // When any long select loses focus, convert it back to a select
                $("select").blur( function() {
                                    if ($(this).find("option").length <= 30) return;
                                    $(this).css("position", "static");
                                    $(this).attr("size", 1);
                                });

                // When any option in a long select is clicked, call blur on the select
                $("option").click(function(){
                                    if ($(this).parent().find("option").length <= 30) return;
                                    $(this).parent().blur();
                                });            
          }
    </script>
</head>
<body>
    <br>
    <select >
        <option value="">Select (Huge)</option>
        <option value="LS">TRANSFORMER VAULT - STAIRS</option>
        <option value="M4">UTILITY ROOM - 4TH</option>
        <option value="M5">UTILITY ROOM - 5TH</option>
        <option value="M2">UTILITY ROOM - 2ND</option>
        <option value="LR">TRANSFORMER VAULT - RIGHT</option>
        <option value="M3">UTILITY ROOM - 3RD</option>
        <option value="LB">TRANSFORMER VAULT - BACK</option>
        <option value="LF">TRANSFORMER VAULT - FRONT</option>
        <option value="LL">TRANSFORMER VAULT - LEFT</option>
        <option value="LI">TRANSFORMER VAULT - BARN</option>
        <option value="LO">TRANSFORMER VAULT - OUTSIDE</option>
        <option value="LP">TRANSFORMER VAULT - POLE</option>
        <option value="M1">UTILITY ROOM - 1ST</option>
        <option value="LN">TRANSFORMER VAULT - NORTH</option>
        <option value="MT">UTILITY ROOM - REAR</option>
        <option value="MR">UTILITY ROOM - RIGHT</option>
        <option value="N3">CLOSET - 3RD</option>
        <option value="MS">UTILITY ROOM - STAIRS</option>
        <option value="MW">UTILITY ROOM - WEST</option>
        <option value="MZ">UTILITY ROOM - UNKNOWN</option>
        <option value="NB">CLOSET - BACK</option>
        <option value="ME">UTILITY ROOM - EAST</option>
        <option value="MB">UTILITY ROOM - BACK</option>
        <option value="MI">UTILITY ROOM - BARN</option>
        <option value="MF">UTILITY ROOM - FRONT</option>
        <option value="ML">UTILITY ROOM - LEFT</option>
        <option value="MP">UTILITY ROOM - POLE</option>
        <option value="N1">CLOSET - 1ST</option>
        <option value="MQ">UTILITY ROOM - SOUTH</option>
        <option value="N2">CLOSET - 2ND</option>
        <option value="MN">UTILITY ROOM - NORTH</option>
        <option value="MO">UTILITY ROOM - OUTSIDE</option>
        <option value="NS">CLOSET - STAIRS</option>
        <option value="O4">OUTSIDE - 4TH</option>
        <option value="NT">CLOSET - REAR</option>
    </select>   
</body>
</html>

Что делать, если вы используете правильную структуру страницы JQM? Если это не помогает, попробуйте установить data-native-menu="false", это преобразует длинный выбор в страницу JQM.

deblocker 11.04.2018 20:10

Кстати, вам просто нужно использовать либо полный JQM min.css, либо пару theme.css + structure.css

deblocker 11.04.2018 20:24

У меня есть вариант с data-native-menu, но он перейдет на новую страницу правильно, поэтому я не хочу этого.

sham.y 12.04.2018 03:07
1
3
24
0

Другие вопросы по теме