菜鸟教程小白 发表于 2022-12-13 07:18:36

javascript - typeahead.js iOS Safari 与独立 Web 应用程序的差异


                                            <p><p>我了解 typeahead.js 尚不支持移动设备。</p>

<p>即使它在移动浏览器(移动 Safari)中工作,是否有人知道为什么一旦通过网页的“独立”版本查看表单后它可能无法工作?</p>

<p>正在发生的问题是,当我尝试“单击/触摸”建议下拉菜单时,它不会在独立版本中使用该条目填充输入,而 safari 版本确实可以工作。</p>

<p>这种行为是否在任何地方都有记录或在 iOS 中为人所知?</p>

<p>谢谢。</p>

<p>补充:我在 <code>.tt-suggestion</code> 中添加了一个 jquery 委托(delegate)点击监听器以显示警报,该警报适用于移动 safari,但不适用于独立版本(我认为委托(delegate)事件未附加)。</p>

<pre><code>$(document).on(&#39;click&#39;, &#39;.tt-suggestion&#39;, function(e) {
alert(&#39;clicked&#39;);
});
</code></pre></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>我意识到我也在使用 FastClick 库,它会破坏下拉菜单和所选选项之间的延迟。</p>

<p>要解决此问题,请绑定(bind)一个 dom 突变监听器并将 <code>needsclick</code> 类添加到每个 <code><div class="tt- 下的每个 <code><p></code> 类建议"></code>:</p>

<pre><code>$(&#39;.tt-dropdown-menu&#39;).bind(&#39;DOMNodeInserted&#39;, function(e) {
$(e.target).find(&#39;.tt-suggestion&#39;).children(&#39;p&#39;).addClass(&#39;needsclick&#39;);
});
</code></pre>

<p>您也可以尝试使用监听器:</p>

<pre><code>$(&#39;input.typeahead&#39;).change(function(e) {
$(this).closest(&#39;.tt-dropdown-menu&#39;).find(&#39;.tt-suggestion&#39;).children(&#39;p&#39;).addClass(&#39;needsclick&#39;);
});
</code></pre>

<p>或者使用事件委托(delegate)器:</p>

<pre><code>$(&#39;.tt-dropdown-menu&#39;).click(function(e) {
$(e.target).children(&#39;p&#39;).addClass(&#39;needsclick&#39;);
});
</code></pre>

<p>注意:函数未经测试,它们基于内存。</p></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - typeahead.js iOS Safari 与独立 Web 应用程序的差异,我们在Stack Overflow上找到一个类似的问题:
                                                        <a href="https://stackoverflow.com/questions/22651312/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/22651312/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: javascript - typeahead.js iOS Safari 与独立 Web 应用程序的差异