菜鸟教程小白 发表于 2022-12-12 15:08:06

html - 在 iOS 上为 Ionic 中的两个键盘腾出空间


                                            <p><p>所以我在 IonicView 的页脚中有一个标签栏和一个输入,如下图所示:</p>

<p> <img src="/image/MJPq1.png" alt="enter image description here"/> </p>

<p>但是当我单击底部的输入字段时,似乎为两个键盘留出了空间,如下所示:</p>

<p> <img src="/image/hJoyl.png" alt="enter image description here"/> </p>

<p>我可以在输入字段下方的空间中滚动以将其放回应有的位置,但我不知道如何将其放回原处。</p>

<p>这是选项卡和 View 的代码:</p>

<pre><code>    &lt;ion-tabs class=&#34;tabs-icon-top&#34;&gt;
      &lt;ion-tab title=&#34;Tab 1&#34; icon=&#34;ion-ionic&#34;&gt;
            &lt;ion-nav-view name=&#34;tab-one&#34;&gt;
                &lt;ion-content&gt;
                  &lt;h1&gt;Header 1&lt;/h1&gt;
                  &lt;h2&gt;Header 2&lt;/h2&gt;
                  &lt;h3&gt;Header 3&lt;/h3&gt;
                &lt;/ion-content&gt;
                &lt;ion-footer-bar keyboard-attach class=&#34;bar-stable item-input-inset&#34;&gt;
                  &lt;label class=&#34;item-input-wrapper&#34;&gt;
                        &lt;input type=&#34;text&#34; placeholder=&#34;Type your message&#34;&gt;
                  &lt;/label&gt;
                  &lt;button class=&#34;button button-clear&#34;&gt;Send&lt;/button&gt;
                &lt;/ion-footer-bar&gt;
            &lt;/ion-nav-view&gt;
      &lt;/ion-tab&gt;
      &lt;ion-tab title=&#34;Tab 2&#34; icon=&#34;ion-ionic&#34;&gt;
            &lt;ion-nav-view name=&#34;tab-two&#34;&gt;
                2
            &lt;/ion-nav-view&gt;
      &lt;/ion-tab&gt;
      &lt;ion-tab title=&#34;Tab 3&#34; icon=&#34;ion-ionic&#34;&gt;
            &lt;ion-nav-view name=&#34;tab-three&#34;&gt;
                3
            &lt;/ion-nav-view&gt;
      &lt;/ion-tab&gt;
    &lt;/ion-tabs&gt;
</code></pre>

<p>我在没有使用 <code>keyboard-attach</code> 的情况下尝试过,但它会将屏幕上半部分的所有内容(包括导航栏,如果有的话)推离我的屏幕不想发生。</p>

<p>所以基本上我希望输入字段在选择时位于键盘正上方,并且内容不会被推离页面顶部。</p>

<p>非常感谢任何帮助!</p>

<p> ionic 版本:1.3.20</p>

<p> Cordova 版本:4.3.0</p>

<p>Xcode 版本:6.3</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>将这个添加到 app.js 中的 run 函数解决了我的问题</p>

<pre><code>cordova.plugins.Keyboard.disableScroll(true);
</code></pre></p>
                                   
                                                <p style="font-size: 20px;">关于html - 在 iOS 上为 Ionic 中的两个键盘腾出空间,我们在Stack Overflow上找到一个类似的问题:
                                                        <a href="https://stackoverflow.com/questions/29846816/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/29846816/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: html - 在 iOS 上为 Ionic 中的两个键盘腾出空间