Android 行为不端上的 PhoneGap 选择框

Posted 2023-03-06

【中文标题】Android 行为不端上的 PhoneGap 选择框

【英文标题】：PhoneGap Select Boxes on Android Misbehaving

【发布时间】：2014-10-25 00:04:25

【问题描述】：

我的应用中有选择框，它们显示正确、可选择（即：可以单击它们，显然可以进行选择），但不符合它们应有的方式：

单击列表中的项目后，该选项的名称/值不会填充到表单中。

我发现了很多关于选择框问题的 *** 问题/答案，但似乎都不是我的问题。尽管如此，我已经尝试了这些建议但没有成功，包括在选择框中放置一个高 z-index 值，在 CSS 中添加一些 -webkit 特定值等等。

我试过了：

<select> box not displaying on android in PhoneGap

<select> not working in Phonegap app on Android 2.3.3

PhoneGap build webkit-appearance no drop down arrow for select tag

https://github.com/jquery/jquery-mobile/issues/6992

https://www.daniweb.com/web-development/threads/451455/phonegap-select-box-is-not-working

不涉及 jQuery。

关于选择框我有什么遗漏吗？

一个例子——html：

<select name="people0" id="people0" onfocus="isDirty=1" style="display:inline-block;min-width:150px;" data-native-menu="true">
        <option value="0">Choose Person</option>
            <option value="15098">Desjardins, Emily</option>
        <option value="17304">Hulley, Patrick</option>
        <option value="1">Silver, Jason</option>
</select>

CSS：

select
    /* Suggestions found: having trouble with not being able to select items: */
    -webkit-user-select: auto !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    z-index:1000 !important;

11 月 8 日更新：

我发现了一个糟糕的解决方法——但至少你可以选择选项。当 HTML 响应来自服务器时，我检查其中是否有 select 元素，如果有，则将事件侦听器附加到它们：

var allSelectElements = document.getElementsByTagName('select');
for (var i=0; i < allSelectElements.length; i++) 
    allSelectElements[i].addEventListener('touchstart', function(e) 
        alert('initiating touch');
        this.focus;
    , false);

我希望有人能一劳永逸地解决这个问题。 :-/

【问题讨论】：

有时，如果在选择框处于视图中时，我拖动手指以滚动灰色背景，或者在松开之前触摸并按住选项片刻，它似乎可以工作。跨度>

发现了一个有趣的方面——不是通过添加对点击/触摸结束的关注，而是通过在 touchstart 上发送一个警告框......我现在可以让它工作的唯一方法：var allSelectElements = document.getElementsByTagName('select'); for (var i=0; i

【参考方案1】：

我用类似的代码解决了：

var allSelectElements = document.getElementsByTagName('select');
for (var i=0; i < allSelectElements.length; i++) 
    allSelectElements[i].addEventListener('touchstart', function(e)
        //This is the important line
        e.stopPropagation(); 
    , false);

【讨论】：

太棒了，干得好！

【参考方案2】：

对我有用的唯一方法是添加一个 jQuery 技巧：

$('select').click(function () 
    $(this).focus();
);

【讨论】：

我用普通的旧javascript编写，但我会尝试类似的东西。

请注意我上面的技巧——只有这样我才能让它工作。 （我没有使用 jQuery）...我以编程方式将事件侦听器添加到选择框，因此在触摸它们时会出现警报。不知何故，这允许选择一个选项。

它有效，但很糟糕——肯定有更好的方法。 :-(