blocks|key|4421183|text|我也需要实现这一点。我这样做了，它工作得很完美。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4421184|首先，你需要使用cordova插件键盘，并在开始时调用cordova.plugins.Keyboard.disableScroll(true);，这样键盘就不会推高你的视图。第二，你需要用处理器来监听键盘显示和键盘隐藏事件：|offset|length|style|CODE|4421185|cordova.plugins.Keyboard.disableScroll(true);
++++++++++++++++++++window.addEventListener('native.keyboardshow',+this.dispatchMe);
++++++++++++++++++++window.addEventListener('native.keyboardhide',+this.dispatchMeHide);

++++dispatchMe(e)+{
++++++++var+event+=+new+CustomEvent('keyboardShown');
++++++++event['keyboardHeight']+=+e.keyboardHeight;
++++++++document.dispatchEvent(event);
++++}

++++dispatchMeHide()+{
++++++++var+event+=+new+CustomEvent('keyboardShown');
++++++++event['closed']+=+true;
++++++++document.dispatchEvent(event);
++++}|code-block|syntax|javascript|4421186|然后你就可以从像这样的事件中得到一个可观察的：|4421187|this.keyboardObservable+=+Observable.fromEvent(document,+'keyboardShown');|4421188|然后你才能听到那个观察者的声音。如果键盘处于打开状态，则更改显示消息的容器的高度。基本上，你必须降低键盘的高度。下面是我是如何做到的|4421189|this.chatService.keyboardObservable
++++++++++++.subscribe(data+=>+{
++++++++++++++++if+(data.closed)+{
++++++++++++++++++++this.sectionHeight+=+85+%2B+'%25';
++++++++++++++++++++this.inputBottom+=+0+%2B+'%25';
++++++++++++++++}
++++++++++++++++else+{
++++++++++++++++++++this.docHeight+=+document.body.clientHeight;
++++++++++++++++++++this.sectionHeight+=+((this.docHeight+-+data.keyboardHeight+-+(document.getElementById('toptoolbar').clientHeight+%2B+document.getElementById('inputchat').clientHeight))+/+this.docHeight)+*+100+%2B+'%25';
++++++++++++++++++++this.inputBottom+=+data.keyboardHeight+/+this.docHeight+*+100+%2B+'%25';
++++++++++++++++}

++++++++++++});|4421190|并使用ngStyle更改这些属性，如下所示|4421191|[ngStyle]="{'height':+sectionHeight}"|4421192|我在聊天应用上也需要这个，现在它工作得很好(即使你旋转屏幕的纵向/横向模式)，输入总是漂浮在键盘上方，就像在本机应用中一样:)|4421193|我希望这能对你有所帮助！|4421194|entityMap^0|0|R|19|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@$D|16|E|17|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1D|8|@]|9|@]|A|$]]|$1|W|3|X|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|Y|3|Z|5|6|7|1F|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1G|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

<p>I've also needed to implement this. I did it and it works perfectly.</p>

<p>1st you need to use cordova plugins keyboard, and at the start call 
<code>cordova.plugins.Keyboard.disableScroll(true);</code> so the keyboard will not push your view up.
2nd you need to listen on keyboardshow and keyboard hide events like this with a the handlers:</p>

<pre><code>cordova.plugins.Keyboard.disableScroll(true);
                    window.addEventListener('native.keyboardshow', this.dispatchMe);
                    window.addEventListener('native.keyboardhide', this.dispatchMeHide);

    dispatchMe(e) {
        var event = new CustomEvent('keyboardShown');
        event['keyboardHeight'] = e.keyboardHeight;
        document.dispatchEvent(event);
    }

    dispatchMeHide() {
        var event = new CustomEvent('keyboardShown');
        event['closed'] = true;
        document.dispatchEvent(event);
    }
</code></pre>

<p>Than you can make an observable from event like this:</p>

<pre><code>this.keyboardObservable = Observable.fromEvent(document, 'keyboardShown');
</code></pre>

<p>Than you can listen to that observable. If the keyboard is open than you change the height of the container where your messages are shown. You basically have to make it lower for the height of the keyboard. Here is how I did that</p>

<pre><code>this.chatService.keyboardObservable
            .subscribe(data =&gt; {
                if (data.closed) {
                    this.sectionHeight = 85 + '%';
                    this.inputBottom = 0 + '%';
                }
                else {
                    this.docHeight = document.body.clientHeight;
                    this.sectionHeight = ((this.docHeight - data.keyboardHeight - (document.getElementById('toptoolbar').clientHeight + document.getElementById('inputchat').clientHeight)) / this.docHeight) * 100 + '%';
                    this.inputBottom = data.keyboardHeight / this.docHeight * 100 + '%';
                }

            });
</code></pre>

<p>and you change these properties with ngStyle like this</p>

<pre><code>[ngStyle]="{'height': sectionHeight}"
</code></pre>

<p>I also needed this for chatapp, and now it works perfectly (even if you rotate the screen portrait/landscape mode), the input always floats above the keyboard just like in the native apps :)</p>

<p>I hope this will help you!</p>


blocks|key|4421226|text|我在Android上遇到了这个问题，所以我创建了一个服务方法，我可以把它放到单独的组件中。它基于在<ion-content>标记内使用<ion-input>字段。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4421227|这利用了添加到Content类中的setScrollTop方法。|4421228|服务|4421229|export+class+KeyboardService+{

++++autoKeyboardScroll(content:Content,+scrollBackAfterKeyboardClose?:boolean)+{
++++++++if+(!content)+{
++++++++++++return;
++++++++}
++++++++var+previousScrollTop+=+null;
++++++++function+onKeyboardShow(e)+{
++++++++++++//+if+the+content+no+longer+exists,+stop+the+listener
++++++++++++if+(removeListenersForMissingContent())+{
++++++++++++++++return;
++++++++++++}
++++++++++++previousScrollTop+=+content.getScrollTop();
++++++++++++//+find+the+input+that's+currently+in+focus
++++++++++++var+focusedElement+=+document.activeElement;
++++++++++++if+(focusedElement+&&+['INPUT',+'TEXTAREA'].indexOf(focusedElement.tagName)!==-1)+{
++++++++++++++++//+determine+the+total+offset+between+the+top+of+the+"ion-content"+and+this+element.
++++++++++++++++//+we+will+do+this+by+climbing+up+the+dom+until+we+reach+the+"ion-content"
++++++++++++++++var+offsetTop+=+focusedElement.offsetTop+%2B+focusedElement.scrollHeight;
++++++++++++++++var+parentEl+=+focusedElement.offsetParent;
++++++++++++++++while+(parentEl+&&+parentEl.tagName!=='ION-CONTENT')+{
++++++++++++++++++++offsetTop+%2B=+parentEl.offsetTop;
++++++++++++++++++++parentEl+=+parentEl.offsetParent;
++++++++++++++++}
++++++++++++++++//+we+want+to+move+the+input+so+that+the+bottom+of+the+focused+input+is+just+above+the+keyboard
++++++++++++++++var+contentDimensions+=+content.getContentDimensions();
++++++++++++++++var+newScrollTop+=+offsetTop+-+(contentDimensions.contentHeight+-+focusedElement.scrollHeight);
++++++++++++++++content.setScrollTop(newScrollTop);
++++++++++++}
++++++++}
++++++++function+onKeyboardHide(e)+{
++++++++++++//+if+the+content+no+longer+exists,+stop+the+listener
++++++++++++if+(removeListenersForMissingContent())+{
++++++++++++++++return;
++++++++++++}
++++++++++++//+set+the+scroll+top+back+to+the+initial+position,+if+requested
++++++++++++if+(scrollBackAfterKeyboardClose)+{
++++++++++++++++content.setScrollTop(previousScrollTop);
++++++++++++}
++++++++}
++++++++function+removeListenersForMissingContent()+{
++++++++++++//+if+there+is+no+content,+remove+the+keyboard+listeners
++++++++++++if+(!content+%7C%7C+content.getContentDimensions().contentHeight===0)+{
++++++++++++++++window.removeEventListener('native.keyboardshow',+onKeyboardShow);
++++++++++++++++window.removeEventListener('native.keyboardhide',+onKeyboardHide);
++++++++++++++++return+true;
++++++++++++}
++++++++}
++++++++//+setup+listeners
++++++++window.addEventListener('native.keyboardshow',+onKeyboardShow);
++++++++window.addEventListener('native.keyboardhide',+onKeyboardHide);
++++}
}|code-block|syntax|javascript|4421230|组件|4421231|@Component({
++++template:+`<ion-content>
++++++++<ion-list>
++++++++++++<ion-item>
++++++++++++++++<div+style="height:+400px"></div>
++++++++++++</ion-item>
++++++++++++<ion-item>
++++++++++++++++<ion-label>Field+1</ion-label>
++++++++++++++++<ion-input+type="text"></ion-input>
++++++++++++</ion-item>
++++++++++++<ion-item>
++++++++++++++++<ion-label>Field+2</ion-label>
++++++++++++++++<ion-input+type="text"></ion-input>
++++++++++++</ion-item>
++++++++++++<ion-item>
++++++++++++++++<ion-label>Field+3</ion-label>
++++++++++++++++<ion-input+type="text"></ion-input>
++++++++++++</ion-item>
++++++++++++<ion-item>
++++++++++++++++<ion-label>Field+4</ion-label>
++++++++++++++++<ion-input+type="text"></ion-input>
++++++++++++</ion-item>
++++++++++++<ion-item>
++++++++++++++++<ion-label>Field+5</ion-label>
++++++++++++++++<ion-input+type="text"></ion-input>
++++++++++++</ion-item>
++++++++++++<ion-item>
++++++++++++++++<ion-label>Field+6</ion-label>
++++++++++++++++<ion-input+type="text"></ion-input>
++++++++++++</ion-item>
++++++++</ion-list>
++++</ion-content>`
})
export+class+MyPage+{
++++@ViewChild(Content)+content:+Content;

++++constructor(private:+keyboardService:+KeyboardService)+{}

++++//+add+the+keyboard+scroll+action+to+this+page.+this+is+added+after+the+view+has+been+created,
++++//+so+the+content+element+will+be+avaialble.
++++ionViewDidEnter()+{

++++++++//+timeout+seems+to+be+required,+to+ensure+that+the+content+child+is+available
++++++++setTimeout(()+=>+{
++++++++++++//+set+the+keyboard+to+auto-scroll+to+the+focused+input,+when+it+opens
++++++++++++this.keyboardService.autoKeyboardScroll(this.content);
++++++++});
++++}
}|4421232|entityMap^0|1D|D|1V|B|0|7|7|H|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|14|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|16|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|17|8|@]|D|@]|E|$M|N]]|$1|S|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|T|$]]

<p>I was having this problem with Android, so I created a service method that I could put into individual components. It's based on using <code>&lt;ion-input&gt;</code> fields inside of an <code>&lt;ion-content&gt;</code> tag.</p>

<p>This takes advantage of the <code>setScrollTop</code> method that was added to the <code>Content</code> class.</p>

<h1>Service</h1>

<pre><code>export class KeyboardService {

    autoKeyboardScroll(content:Content, scrollBackAfterKeyboardClose?:boolean) {
        if (!content) {
            return;
        }
        var previousScrollTop = null;
        function onKeyboardShow(e) {
            // if the content no longer exists, stop the listener
            if (removeListenersForMissingContent()) {
                return;
            }
            previousScrollTop = content.getScrollTop();
            // find the input that's currently in focus
            var focusedElement = document.activeElement;
            if (focusedElement &amp;&amp; ['INPUT', 'TEXTAREA'].indexOf(focusedElement.tagName)!==-1) {
                // determine the total offset between the top of the "ion-content" and this element.
                // we will do this by climbing up the dom until we reach the "ion-content"
                var offsetTop = focusedElement.offsetTop + focusedElement.scrollHeight;
                var parentEl = focusedElement.offsetParent;
                while (parentEl &amp;&amp; parentEl.tagName!=='ION-CONTENT') {
                    offsetTop += parentEl.offsetTop;
                    parentEl = parentEl.offsetParent;
                }
                // we want to move the input so that the bottom of the focused input is just above the keyboard
                var contentDimensions = content.getContentDimensions();
                var newScrollTop = offsetTop - (contentDimensions.contentHeight - focusedElement.scrollHeight);
                content.setScrollTop(newScrollTop);
            }
        }
        function onKeyboardHide(e) {
            // if the content no longer exists, stop the listener
            if (removeListenersForMissingContent()) {
                return;
            }
            // set the scroll top back to the initial position, if requested
            if (scrollBackAfterKeyboardClose) {
                content.setScrollTop(previousScrollTop);
            }
        }
        function removeListenersForMissingContent() {
            // if there is no content, remove the keyboard listeners
            if (!content || content.getContentDimensions().contentHeight===0) {
                window.removeEventListener('native.keyboardshow', onKeyboardShow);
                window.removeEventListener('native.keyboardhide', onKeyboardHide);
                return true;
            }
        }
        // setup listeners
        window.addEventListener('native.keyboardshow', onKeyboardShow);
        window.addEventListener('native.keyboardhide', onKeyboardHide);
    }
}
</code></pre>

<h1>Component</h1>

<pre><code>@Component({
    template: `&lt;ion-content&gt;
        &lt;ion-list&gt;
            &lt;ion-item&gt;
                &lt;div style="height: 400px"&gt;&lt;/div&gt;
            &lt;/ion-item&gt;
            &lt;ion-item&gt;
                &lt;ion-label&gt;Field 1&lt;/ion-label&gt;
                &lt;ion-input type="text"&gt;&lt;/ion-input&gt;
            &lt;/ion-item&gt;
            &lt;ion-item&gt;
                &lt;ion-label&gt;Field 2&lt;/ion-label&gt;
                &lt;ion-input type="text"&gt;&lt;/ion-input&gt;
            &lt;/ion-item&gt;
            &lt;ion-item&gt;
                &lt;ion-label&gt;Field 3&lt;/ion-label&gt;
                &lt;ion-input type="text"&gt;&lt;/ion-input&gt;
            &lt;/ion-item&gt;
            &lt;ion-item&gt;
                &lt;ion-label&gt;Field 4&lt;/ion-label&gt;
                &lt;ion-input type="text"&gt;&lt;/ion-input&gt;
            &lt;/ion-item&gt;
            &lt;ion-item&gt;
                &lt;ion-label&gt;Field 5&lt;/ion-label&gt;
                &lt;ion-input type="text"&gt;&lt;/ion-input&gt;
            &lt;/ion-item&gt;
            &lt;ion-item&gt;
                &lt;ion-label&gt;Field 6&lt;/ion-label&gt;
                &lt;ion-input type="text"&gt;&lt;/ion-input&gt;
            &lt;/ion-item&gt;
        &lt;/ion-list&gt;
    &lt;/ion-content&gt;`
})
export class MyPage {
    @ViewChild(Content) content: Content;

    constructor(private: keyboardService: KeyboardService) {}

    // add the keyboard scroll action to this page. this is added after the view has been created,
    // so the content element will be avaialble.
    ionViewDidEnter() {

        // timeout seems to be required, to ensure that the content child is available
        setTimeout(() =&gt; {
            // set the keyboard to auto-scroll to the focused input, when it opens
            this.keyboardService.autoKeyboardScroll(this.content);
        });
    }
}
</code></pre>


blocks|key|4421285|text|我找到了一个在IOS上适用的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4421286|当您在浏览器中使用<ion-input>检查<ion-item>+(使用Safari+for+IOS进行调试)时，您可以发现ionic生成了一个样式为position:+absolute;的<div+class='input-cover'>。|offset|length|style|CODE|4421287|编写一个CSS来覆盖它，如下所示|4421288|.input-cover+{
++position:+static;
}|code-block|syntax|javascript|4421289|这对我来说很有用，现在当你专注于输入字段时，它会滚动到视图中，不再隐藏在键盘下面，所有这些都工作得非常流畅。|4421290|entityMap^0|0|9|B|M|A|23|J|2N|P|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]|$D|W|E|X|F|G]|$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|R|$]]

<p>I found a solution which works for me on IOS.</p>

<p>When you inspect the <code>&lt;ion-item&gt;</code> with <code>&lt;ion-input&gt;</code> in the browser(debugging use Safari for IOS) you can find that ionic generates a <code>&lt;div class='input-cover'&gt;</code> which has the style <code>position: absolute;</code>.</p>

<p>Write a CSS which overrides this as below</p>

<pre><code>.input-cover {
  position: static;
}
</code></pre>

<p>This did the trick for me and now when you focus on an input field, it scrolls into view and does not hide below the keyboard anymore and all this works buttery smooth.</p>


<p>I want my message input bar to float above the keyboard when the keyboard shows but it looks like there's no <a href="http://ionicframework.com/docs/v2/api/util/Keyboard/">keyboard-attach directive</a> (<a href="http://ionicframework.com/docs/api/directive/keyboardAttach/">like v1</a>) in Ionic 2 yet (<a href="https://github.com/driftyco/ionic/issues/5536">maybe in the works</a>?). Is there any alternative/workaround?</p>

<p>Current behaviour:</p>

<p><img src="https://cdn.discourse.org/ionicframework/uploads/default/original/3X/1/7/17e1422aab4f42b38cfe582064ca35d09a511df6.PNG" width="281" height="499"><img src="https://cdn.discourse.org/ionicframework/uploads/default/original/3X/a/b/ab8ac73b7e8c3958b262d02a601b64fe2f772779.PNG" width="281" height="499"></p>

<p>Wanted behaviour:</p>

<p><img src="https://cdn.discourse.org/ionicframework/uploads/default/original/3X/d/7/d74b3624a4e88353ba644224642a592b49a2ef55.PNG" width="281" height="499"></p>

<p>Here's the code of my message input bar:</p>

<pre><code>&lt;ion-toolbar position="bottom" *ngIf="userIsAdmin"&gt;

    &lt;form (ngSubmit)="onSubmit(f)" #f="ngForm" class="message-form"&gt;

        &lt;ion-badge class="message-form-badge"&gt;Admin&lt;/ion-badge&gt;

        &lt;ion-input type="text" placeholder="Type a message..." ngControl="messageInput"&gt;&lt;/ion-input&gt;

        &lt;button type="submit" small class="message-form-button"&gt;Send &lt;ion-icon name="send"&gt;&lt;/ion-icon&gt;&lt;/button&gt;

    &lt;/form&gt;

&lt;/ion-toolbar&gt;
</code></pre>


In Ionic 2, how to float an element above the keyboard when the keyboard shows?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我希望我的消息输入栏在键盘显示时浮动在键盘上方，但看起来在IONIC2中还没有 () (?)。是否有其他选择/解决方法？当前行为：​​想要的行为：​​下面是我的消息输入栏的代码：<ion-toolbar position="bottom" *ngIf="userIsAdmin">    <form (ngSubmit)...

问在Ionic 2中，当键盘显示时，如何将元素浮动在键盘上方？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Ionic 2中，当键盘显示时，如何将元素浮动在键盘上方？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Ionic 2中，当键盘显示时，如何将元素浮动在键盘上方？
EN