javascript - 如何强制我的下拉框 (HTML) 在 iOS 滚轮上打开

Question

我对编码比较陌生，我很想学习……但是……

我有以下 HTML 下拉框 - 我已经包含了 javascript 和 css 以防万一。

我想要，当用户在 iOS 设备上时，当用户点击下拉菜单时，可以使用 iOS 滚轮选择选项......如下图所示，我希望有人能提供帮助！

---

代码：

/* When the user clicks on the button,
            toggle between hiding and showing the dropdown content */
            function myFunction() {
                document.getElementById("myDropdown").classList.toggle("show");
            }
            
            function filterFunction() {
                var input, filter, ul, li, a, i;
                input = document.getElementById("myInput");
                filter = input.value.toUpperCase();
                div = document.getElementById("myDropdown");
                a = div.getElementsByTagName("a");
                for (i = 0; i < a.length; i++) {
                    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
                        a[i].style.display = "";
                    } else {
                        a[i].style.display = "none";
                    }
                }
            }

.dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            }
            .dropbtn:hover, .dropbtn:focus {
            background-color: #3e8e41;
            }
            #myInput {
            border-box: box-sizing;
            background-image: url('searchicon.png');
            background-position: 14px 12px;
            background-repeat: no-repeat;
            font-size: 16px;
            padding: 14px 20px 12px 45px;
            border: none;
            border-bottom: 1px solid #ddd;
            }
            #myInput:focus {outline: 3px solid #ddd;}
            .dropdown {
            position: relative;
            display: inline-block;
            }
            .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f6f6f6;
            min-width: 250px;
            height: 300px;
            overflow-y: scroll;
            overflow-x: hidden;
            border: 1px solid #ddd;
            z-index: 1;
            }
            .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            }
            .dropdown a:hover {background-color: #ddd;}
            .show {display: block;}

        <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Dropdown</button>
            <div id="myDropdown" class="dropdown-content">
                <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
                <a href="#about">About</a>
                <a href="#base">Base</a>
                <a href="#blog">Blog</a>
                <a href="#contact">Contact</a>
                <a href="#custom">Custom</a>
                <a href="#support">Support</a>
                <a href="#tools">Tools</a>
            </div>
        </div>

标签： javascripthtmliosiphone

Answer 1

欢迎来到本站！

我认为您的问题是您已经实现了自己的下拉菜单，而不是使用内置和标签。我相信使用这些会导致 iOS 在与该元素交互时自动呈现选择器。

/* When the user clicks on the button,
        toggle between hiding and showing the dropdown content */
        function myFunction() {
            document.getElementById("dropdown-block").classList.toggle("show");
        }

        function filterFunction() {
            var input, filter, ul, li, a, i;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            div = document.getElementById("myDropdown");
            a = div.getElementsByTagName("option");
            for (i = 0; i < a.length; i++) {
                if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
                    a[i].style.display = "";
                } else {
                    a[i].style.display = "none";
                }
            }
        }

.dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        }
        .dropbtn:hover, .dropbtn:focus {
        background-color: #3e8e41;
        }
        #myInput {
        border-box: box-sizing;
        background-image: url('searchicon.png');
        background-position: 14px 12px;
        background-repeat: no-repeat;
        font-size: 16px;
        padding: 14px 20px 12px 45px;
        border: none;
        border-bottom: 1px solid #ddd;
        }
        #myInput:focus {outline: 3px solid #ddd;}
        .dropdown {
        position: relative;
        display: none;
        }
        .dropdown-content {
        background-color: #f6f6f6;
        min-width: 250px;
        overflow-y: scroll;
        overflow-x: hidden;
        border: 1px solid #ddd;
        z-index: 1;
        display:block;
        }
        .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        }
        .dropdown a:hover {background-color: #ddd;}
        .show {display: block;}

<button onclick="myFunction()" class="dropbtn">Dropdown</button>    
<div id="dropdown-block" class="dropdown">        
  <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
  <select id="myDropdown" class="dropdown-content">
    <option href="#about">About</option>
    <option href="#base">Base</option>
    <option href="#blog">Blog</option>
    <option href="#contact">Contact</option>
    <option href="#custom">Custom</option>
    <option href="#support">Support</option>
    <option href="#tools">Tools</option>
  </select>
</div>