在移动 Safari 上关闭软件键盘后，带有选项的 <select> 标记位置错误答案

【问题标题】：The <select> tag with options has wrong position after software keyboard being closed on mobile Safari在移动 Safari 上关闭软件键盘后，带有选项的 <select> 标记位置错误
【发布时间】：2014-09-29 01:18:46
【问题描述】：

我正在使用带有选项的select 标签在移动版 Safari 中显示搜索结果。

问题来了：

用户将焦点设置为输入onblur="ShowSelectTag()" type="text" 在那个键盘出现之后
用户写了一些文本来搜索并按下按钮
“blur”事件发生，带有结果的选择元素显示在适当的位置
键盘被隐藏（由于模糊事件），但选择元素的位置保持不变。

HTML如下：

<input type="text" onblur="ShowSelectTag()" />
<input type="button" value="click me" onclick="return false;" />
<select id="SelectToShow" style="width:0px;">
    <option>otpion</option>
    <option>otpion</option>
    <option>otpion</option>
    <option>otpion</option>
    <option>otpion</option>       
</select>

显示select标签的JS方法：

<script type="text/javascript">
    function ShowSelectTag()
    {
        var Select = document.getElementById("SelectToShow");
        var event;
        event = document.createEvent('MouseEvents');
        event.initMouseEvent('mousedown', true, true, window);
        Select.dispatchEvent(event);
    }
</script>

下一个图片链接：https://onedrive.live.com/redir?resid=B2873888E0BA0E45!1335&authkey=!ADjrvx4jm1rCDWg&v=3&ithint=photo%2cpng

链接到html文件：https://onedrive.live.com/redir?resid=B2873888E0BA0E45%211334

如果有人有这方面的经验，将不胜感激。

【问题讨论】：

我的回答有帮助吗..？
谢谢@rahul_send89。如果您的页面没有滚动，这是一个很好的解决方案。如果是这样，则在您滚动页面后，选择标签将定位在与以前相同的坐标处。

标签： ios select keyboard

【解决方案1】：

<input type="text" id="searchText" onblur="ShowSelectTag()" />
<input type="button" value="click me" onclick="return false;" />
<select id="SelectToShow" style="width:0px;position:absolute;">
        <option>otpion</option>
        <option>otpion</option>
        <option>otpion</option>
        <option>otpion</option>
        <option>otpion</option>        
    </select>

<script>
   function getPos(el) {
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
   }
   (function () {
      var myInput = document.getElementById('searchText');
      var pos = getPos(myInput);
      document.getElementById("SelectToShow").style.left = pos.x+"px";
      document.getElementById("SelectToShow").style.top = pos.y+"px";
   })();

   function ShowSelectTag()
    {
        var Select = document.getElementById("SelectToShow");
        var event;
        event = document.createEvent('MouseEvents');
        event.initMouseEvent('mousedown', true, true, window);
        Select.dispatchEvent(event);
    }
</script>

如果有帮助请告诉我！

【讨论】：

不修复它。在 iPad 上结帐jsbin.com/deraxatagewi/1。在键盘打开和关闭后，它仍然在输入上方显示选择，而不是在下方。
很遗憾，它仍然不起作用。我的意思是下拉列表显示在输入上方，而不是下方。这与初始位置计算无关，而是 iOS 如何计算它认为有足够空间显示列表的位置。
@TomRoggero：仅适用于 iPhone。不是 iPad。 ?你可以随时修改位置并添加一个宽度常数 m 确保它会起作用。
@TomRoggero: 或为 iPad 使用 setTimeout。使用 iPad 特定代码 .. stackoverflow.com/questions/4460205/…
正如对下面答案的评论，苹果不允许你这样做。

【解决方案2】：

尝试使用超时让键盘关闭在您打开 SELECT：

onblur="window.setTimeout('ShowSelectTag()',1000);"

然后尝试将延迟减少到 0 以查看它立即工作。

onblur="window.setTimeout('ShowSelectTag()',0);"

【讨论】：

异步添加到 .focus() 或 window.open() 等效项不会在 iOS 上触发任何内容，因为它们需要用户直接操作，而异步使其间接。
谢谢@FrancescoMM，我尝试了那个解决方案。这无济于事，Tom Roggero 关于 iOS 如何处理事件是正确的。