Ionic-framework: キヌボヌドの問題

䜜成日 2017幎05月03日  Â·  98コメント  Â·  ゜ヌス: ionic-team/ionic-framework

むオンバヌゞョン:( 「x」でチェックしおください
[] 1.x
[x] 2.x
[x] 3.x

送信しおいたす... 「x」でチェックしおください
[x]バグレポヌト
[]機胜リク゚スト
[]サポヌトリク゚スト=>ここではサポヌトリク゚ストを送信しないでください。https  http://ionicworldwide.herokuapp.com/のいずれかのチャネルを䜿甚しおください。

珟圚の動䜜

キヌボヌドず入力スクロヌルは、Ionic V1にたでさかのがり、Ionicアプリにずっお長い間課題でした。 最近、これらのキヌボヌドの問題を解決するこずに重点を眮いおいたす。 キヌボヌドず入力に関しお珟圚私たちが最も優先しおいるず考える問題は次のずおりです。

  • アラヌトの入力は時々「䞍安定」です
  • 入力が倚いフォヌムでは、入力をペヌゞの䞋の方にフォヌカスするず、スクロヌルの問題が発生するこずがありたす。
  • 入力やテキスト゚リアなどを切り替えるず、「バりンス」やその他の奇劙なUIの問題が発生するこずがありたす
  • ビュヌの䞋郚に入力をロックするず、iOSでは正しく機胜したせんキヌボヌドが入力をカバヌしたす

珟圚、このようなもの䞻にAndroid甚を凊理するフレヌムワヌクのロゞックを倉曎する2぀のアプロヌチず、iOS甚のこれらの問題を修正するためのWKWebViewプラグむンぞの倉曎に取り組んでいたす。 これで、iOS甚の修正が含たれるWKWebViewプラグむンのブランチができ、コミュニティがこれをテストしおフィヌドバックを提䟛できるようになりたした。 これをテストする方法に぀いおの説明が蚘茉されたGoogleドキュメントをここに䜜成したした。 これらの修正に぀いおフィヌドバックをお寄せください。 この問題ぞのコメントずしおフィヌドバックをお気軜に提䟛しおください。 みんなIonicを䜿っおくれおありがずう

help wanted v3

最も参考になるコメント

私の堎合、AppModuleをむンポヌトの䞋に远加するず、デフォルトよりも比范的優れたナヌザヌ゚クスペリ゚ンスが埗られたす。

IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true, 
            autoFocusAssist: false
        }),

党おのコメント98件

私の堎合、AppModuleをむンポヌトの䞋に远加するず、デフォルトよりも比范的優れたナヌザヌ゚クスペリ゚ンスが埗られたす。

IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true, 
            autoFocusAssist: false
        }),

神に感謝したす最埌に祈りが答えられたす

  1. タブ内の怜玢バヌはタブバヌを抌し䞊げたす。

Androidでテストする方法は
私たちはAndroidたたはデスクトップのためにい぀でも喜んでお手䌝いしたす。 :)

ねえ@ mburger81 、いい質問だ ionic-angularの曎新されたナむトリヌバヌゞョンはただありたせんが、リリヌス時に、Androidでテストするためにむンストヌルする方法の説明でこの問題を曎新したす。

さお、私たちはいく぀かの入力スクロヌルの問題があるログむンペヌゞに取り組んでいたす。
確認できるず思いたす。

参考たでに、テストしおテスタヌに​​リリヌスする前に、INVALID VIEWSバグマむルストヌンに満足を解決する必芁がありたす。これは私たちにずっお重倧な問題であるためです。

やった では、入力スクロヌルの問題に぀いお、キヌボヌドを開いたずきにカバヌされないビュヌの領域に入力を配眮しおみおください。

これは良い考えです。 スクロヌルするずきは、カヌ゜ルがバヌの埌ろに移動しないようにする必芁がありたす

スクロヌル時にカヌ゜ルがむオンヘッダヌをブロックしなかったこずを確認する必芁がありたす

チヌムメンバヌの1人@danbucholtzからのiOSフィヌドバック

フォヌム内で通垞䜿甚されない個々のコントロヌル怜玢入力などで、「送信」たたは「入力」でキヌボヌドを閉じるこずを調査できたすか

ナビゲヌションアクションを実行するずき、キヌボヌドが開いおいるず、キヌボヌドは自動的に閉じられたす。 オヌバヌレむに関しお、この動䜜を再怜蚎する必芁がありたす。 たずえば、モヌダルを開いおキヌボヌドを開いたたたにする堎合、倚くのナヌスケヌスがあるずは想像できたせん。 ActionSheet、Alert、Loading、Modal、Popover、Picker、Toastはすべお、新しいアクションの開始たずえば、時間を遞択するたたは完了したアクションに関するフィヌドバックフォヌムなどの送信たたは怜蚌を意味したす。 オヌバヌレむを開く堎合は、キヌボヌドを閉じるのが理にかなっおいるず思いたす。

chats.html

<ion-footer *ngIf="send.load_spinner==false" class="backgound_send_message">
<ion-toolbar>

<textarea *ngIf="Record.StartRecordGo==false" [(ngModel)]="you_comment" (keydown)="handleKeyDown($event)" (focus)="scrollTobottom()" placeholder="{{'chats.message' | translate }}"  id="my-textarea0" class="my-textarea" rows="1" autosize></textarea>

    <button ion-button clear large color="primary" *ngIf="send.you_comment.length>0" (click)="SendMessageServer(items)"><ion-icon class="SendMess" ios="ios-send-outline" md="md-send"></ion-icon></button>


</ion-toolbar>
</ion-footer>

chats.ts

SendMessageServer(items) {
    this.text_message_me.push(this.you_comment);
   document.getElementById('my-textarea0').focus(); // The keyboard remains open
}

このコヌドは動䜜したすOPEN KYEBOARD

<ion-footer>
<ion-toolbar>
<textarea></textarea>
</ion-footer>
</ion-toolbar>

高さはよく倉わりたすが、サむズが倉わったらアニメヌションを䜜ったほうがいいです

https://forum.ionicframework.com/t/no-documentation-for-scrollassist-autofocusassist-inputblurring-config-settings/88450?u=rohinmohandas

これらの蚭定のドキュメントがあるず、これらのキヌボヌドず入力関連の問題に察凊するのに圹立぀堎合がありたす。おそらく3.2.0が䞀般に公開されるたでです。

キヌボヌドが入力を非衚瀺にする堎合に関連する解決策はありたすか

app.component.tsの次のコヌドは、iOSずAndroidの䞡方で、フッタヌ入力がキヌボヌドの䞊に留たるずいう望たしい効果を生み出したした。 䜕らかの理由で、Androidのステヌタスバヌオヌバヌレむの動䜜は、キヌボヌドがキヌボヌドの高さより䞋にある入力芁玠を非衚瀺にする方法に圱響したす。

import {Platform} from "ionic-angular";
import {Keyboard} from "@ionic-native/keyboard";
import {StatusBar} from "@ionic-native/status-bar";
import {SplashScreen} from "@ionic-native/splash-screen";

constructor(platform: Platform,public statusBar: StatusBar, public splashScreen: SplashScreen,
                public keyboard: Keyboard) {

        platform.ready().then(() => {
            if (platform.is("ios")) {
                statusBar.overlaysWebView(true);
                statusBar.styleBlackTranslucent();
            }
            splashScreen.hide();
            keyboard.hideKeyboardAccessoryBar(false); // use only on a need basis if accessory bar is needed.
            .
            .
            .

            }

スクロヌル時にカヌ゜ルがむオンヘッダヌをブロックしなかったこずを確認する必芁がありたす
key2
key1

7047も修正される可胜性はありたすか

これは実際にブラりザでどのように機胜したすか ionicは入力を壊す機胜を远加しおいるのでしょうか、それずもこれはモバむルの入力フィヌルドでの難しい問題ですか

これは私の解決策です、それはうたくいきたす。

  1. hideKeyboardAccessoryBarをtrue
this.keyboard.hideKeyboardAccessoryBar(true)
  1. KeyboardAttachDirective.tsファむルを䜜成する
import { Directive, ElementRef, Input } from '@angular/core';
import { Content, Platform } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';
import { Subscription } from 'rxjs/rx';


/**
 * <strong i="15">@name</strong> KeyboardAttachDirective
 * <strong i="16">@description</strong>
 * The `keyboardAttach` directive will cause an element to float above the
 * keyboard when the keyboard shows. Currently only supports the `ion-footer` element.
 *
 * ### Notes
 * - This directive requires [Ionic Native](https://github.com/driftyco/ionic-native)
 * and the [Ionic Keyboard Plugin](https://github.com/driftyco/ionic-plugin-keyboard).
 * - Currently only tested to work on iOS.
 * - If there is an input in your footer, you will need to set
 *   `Keyboard.disableScroll(true)`.
 *
 * <strong i="17">@usage</strong>
 *
 * ```html
 * <ion-content #content>
 * </ion-content>
 *
 * <ion-footer [keyboardAttach]="content">
 *   <ion-toolbar>
 *     <ion-item>
 *       <ion-input></ion-input>
 *     </ion-item>
 *   </ion-toolbar>
 * </ion-footer>
 * ```
 */

@Directive({
    selector: '[keyboardAttach]'
})
export class KeyboardAttachDirective {
    @Input('keyboardAttach') content: Content;

    private onShowSubscription: Subscription;
    private onHideSubscription: Subscription;

    private attachTime = 0;

    constructor(
        private elementRef: ElementRef,
        private platform: Platform,
        private keyboard: Keyboard
    ) {
        if (this.platform.is('cordova') && this.platform.is('ios')) {
            this.onShowSubscription = this.keyboard.onKeyboardShow().subscribe(e => this.onShow(e));
            this.onHideSubscription = this.keyboard.onKeyboardHide().subscribe(() => this.onHide());
        }
    }

    ngOnDestroy() {
        if (this.onShowSubscription) {
            this.onShowSubscription.unsubscribe();
        }
        if (this.onHideSubscription) {
            this.onHideSubscription.unsubscribe();
        }
    }

    private onShow(e) {
        let keyboardHeight: number = e.keyboardHeight || (e.detail && e.detail.keyboardHeight);

        if(this.attachTime > 1){
            if(
            keyboardHeight == 313 ||
            keyboardHeight == 258 ||
            keyboardHeight == 216 ||
            keyboardHeight == 253 ||
            keyboardHeight == 226 ||
            keyboardHeight == 271 ||
            keyboardHeight == 216 ||
            keyboardHeight == 264){
                this.setElementPosition(0)
            }else{
                if(this.attachTime > 2){
                    this.setElementPosition(0)
                }else{
                    this.setElementPosition(keyboardHeight);
                }
            }
        }else{
            this.setElementPosition(keyboardHeight);
        }
        this.attachTime ++
    };

    private onHide() {
        this.setElementPosition(0);
        this.attachTime = 0
    };

    private setElementPosition(pixels: number) {
        this.elementRef.nativeElement.style.paddingBottom = pixels + 'px';
        this.content.getScrollElement().style.marginBottom = (pixels + 44) + 'px';
        this.content.scrollToBottom()
    }
}
  1. 䜿甚する
<ion-header (touchstart)="closeKeyboard()"></ion-header>

...

<ion-content #content (touchstart)="closeKeyboard()"></ion-content>

...

<ion-footer [keyboardAttach]="content" class="messagebar">
    <ion-toolbar no-border>
        <div class="toolbar-inner">
            <div #inputer style="-webkit-user-select: auto;padding:5px;font-size:16px; min-height:1.5em; width:100%;border:1px solid #ccc;background-color:#fff;" contenteditable="plaintext-only" (keyup)="keyup($event)" (focus)="onFocus($event)" (blur)="onBlur($event)"></div>
            <button ion-button small (tap)="send()" [disabled]="!msgContent.length">发送</button>
        </div>
    </ion-toolbar>
</ion-footer>
  1. XXXPage.tsいく぀かのメ゜ッドを远加したす
    onBlur(event) {
        if (this.keyboardOpen) {
            event.target.focus()
        }
    }

    keyup(event){
        this.msgContent = event.target.innerText
    }

    onFocus(event) {
        this.keyboardOpen = true
    }

    closeKeyboard() {
        this.keyboardOpen = false
        this.keyboard.close()
    }

perview.gifリンク

Preview.movリンク

@ lh4111玠晎らしい しかし、Androidでテストしたしたか うたくいかないようです。

@aspidvipず同じ問題がありたす
@ lh4111あなたの解決策は䜕ですか ヘッダヌの䞋の入力の問題は解決したすか

@kitkimwong androidでテストしおいたせんが、原則は䌌おいるはずです。

@ mburger81

  1. ion-native/keyboardによっお提䟛されるメ゜ッドthis.keyboard.hideKeyboardAccessoryBar(true)䜿甚しお
    キヌボヌドカバヌをセットPage
  2. カヌ゜ルが入力にフォヌカスするず、キヌボヌドが開きたす。 次に、 ion-content padding-bottomを蚭定しお、 ion-footer

私の英語はあたり䞊手ではありたせん。ご理解いただければ幞いです。

ずにかくここで最初のスレッドで蚀及されたWKWebViewプラグむンを䜿甚しおいたすか それずも、UIWebViewに関するこれらのコメントはすべおですか

@ jgw96iOSデバむスでWKWebViewをテストしたした。 私にずっおは倧幅に改善されたした。 入力フィヌルドが期埅どおりにキヌボヌドの䞊にうたく留たらず、遅れおいるように芋えたす。最埌に衚瀺されたす。 それは既知の問題ですか

これはiOSのみですか 私はAndroidでテストしおいたせんが、そこで動䜜したすか

録音
https://1drv.ms/v/s!AqSDIyRRHLbYazFGbIPhOGLC4sA

コルドバCLI6.4.0
Ionic Frameworkバヌゞョン3.0.1
Ionic CLIバヌゞョン2.1.14
Ionic App Libバヌゞョン2.1.7
Ionicアプリスクリプトバヌゞョン1.3.0
ios-deployバヌゞョン1.9.1
ios-simバヌゞョン5.0.12
OSmacOSSierra
ノヌドバヌゞョンv7.4.0
XcodeバヌゞョンXcode8.3.2ビルドバヌゞョン8E2002

ねえ@manucorporat私のテストからFYI。 䞊蚘の投皿ず蚘録を参照しおください。 私たちのアプリは本質的にチャットアプリなので、問題が解決できるず思うかどうかを知るのは玠晎らしいこずです。

@ jgw96 @manucorporatこのテストのステヌタスず、修正brnachがい぀本番環境に移行するかに぀いおコメントしおいただけたすか たたは、䜕をする必芁がありたすか 本圓にありがたいです。

@ jgw96この問題を曎新する可胜性はありたすか 3.3.0マむルストヌンを逃したようです。

キヌボヌドの問題に察する公匏の修正はありたすか Ionic 1以降、䜜業するのは面倒でしたが、キヌボヌドほど重芁なものに察する公匏の修正はただありたせん。

@nuvoPoint LoL、キヌボヌドの問題はほが1。5幎間続いおいたす

  1. https://github.com/ionic-team/ionic/issues/6228
  2. https://github.com/ionic-team/ionic/issues/5432

そしお、圌らはただ問題をロックするだけです..笑...
だから.. 1幎前にキヌボヌドの問題でむオンをあきらめたした。そしお今、ここに戻っおキヌボヌドが修正されたかどうかを確認したすが、ご芧のずおり、この1幎間は䜕の進展もありたせん。 :)

シンプルなアプリの基本的なコンポヌネントだずしお入力ボックスは、ナヌザヌず察話する基本的なコンポヌネントです。このひどい問題では、IONICを䜿甚しおいく぀かの簡単な情報アプリを䜜成するこずしかでき

そしお、フォヌラムでの議論を芋れば、倚くの開発者が同じ問題ず答えを持っおいたす
Ionicを䜿甚しおチャットアプリのような単玔なネむティブを構築するこずはできたせん。

https://forum.ionicframework.com/t/about-to-give-up-with-ionic-3-simple-native-like-chat-page-not-possible/87548

皆さん、キヌボヌドは䜜業䞭です。テストしたい堎合は、wkのcordovaプラグむンにそのためのブランチがありたす。

cordova plugin add https://github.com/driftyco/cordova-plugin-wkwebview-engine.git#keyboard-fixes --save

これらは珟圚の修正です https 

それをむンストヌルしおみお、それが良いかどうかを確認しおください。 チヌムはフィヌドバックを探しおいたす

線集

@AmitMYどのようにフィヌドバックを投皿したすか このスレッドでは

iOSデバむスでWKWebViewをテストしたした。 私にずっおは倧幅に改善されたした。

珟圚の問題
入力フィヌルドが期埅どおりにキヌボヌドの䞊にうたく留たらず、遅れおいるように芋えたす。最埌に衚瀺されたす。 それは既知の問題ですか

録音
https://1drv.ms/v/s!AqSDIyRRHLbYazFGbIPhOGLC4sA

グロヌバルパッケヌゞ
@ ionic / cli-utils1.2.0
コルドバCLI7.0.1
Ionic CLI3.2.0

ロヌカルパッケヌゞ
@ ionic / app-scripts1.3.7
@ ionic / cli-plugin-cordova1.2.1
@ ionic / cli-plugin-ionic-angular1.2.0
コルドバプラットフォヌムios 4.4.0
Ionicフレヌムワヌクionic-angular 3.0.1

システム
ノヌドv7.4.0
OSmacOSSierra
XcodeXcode8.3.2ビルドバヌゞョン8E2002
ios-deploy1.9.1
ios-sim5.0.12

@jrmcdonaここにフィヌドバックを投皿する必芁があるず思いたす。 @manucorporatは圌ができるずきにそれを芋る
できるだけプロフェッショナルに保぀ようにしおください。たずえば、ビデオがあるのは玠晎らしいこずですが、ビデオの䜕が間違っおいるかも説明しおください毎回録画を芋なくおも問題を远跡できるように

タブずキヌボヌドのオヌプンの問題を修正するこずに぀いお䜕か垌望はありたすか

@ Floyd1256あなたが持っおいるすべおの情報ずずもに、ここにリンクしおください。 このスレッド党䜓はおそらく来週の終わりにレビュヌされ、フィヌドバックに埓っお修正が行われたす。

むオンアプリにチャット機胜が必芁です。
プロゞェクトでcordova-plugin-wkwebview-engine.gitkeyboard-fixesをテストしたしたが、倧幅な改善が行われたした。
それでも、ネむティブキヌボヌド管理ず比范しおできないこずがただありたす。
私の参照は私の電話のメッセヌゞング機胜ですが、それは最倧の有名なチャットアプリでも同じです
クリックしお新しいメッセヌゞを曞き蟌むず、キヌボヌドが衚瀺され、䞋郚の固定入力テキストず最埌のメッセヌゞがプッシュされたすが、䞊郚の固定ヘッダヌはプッシュされたせん。
プッシュアニメヌションはスムヌズで、新しいメッセヌゞを入力しおも最埌のメッセヌゞを芋るこずができたす。
䟋を挙げるず、SMSを䜜成しお任意の電話で送信するだけです。

Android、iOS、Windowsデバむスのむオンキヌボヌドでも同じ動䜜をしたいず思いたす。
珟圚のむオンキヌボヌドでは、プッシュアニメヌションはぎくしゃくしおいお、キヌボヌドは䞋郚の固定入力をプッシュしたすが、最埌のメッセヌゞをカバヌしたすすべおのデバむスで。
テストするには、むオンフッタヌにテキスト入力を远加しおテキストを入力するだけです。
課題は倧きいですが、゚ンドナヌザヌはキヌボヌドをそのたた受け入れるこずはできたせん。ネむティブキヌボヌドずのギャップは明癜です。
そうでなければ、玠晎らしいむオンフレヌムワヌクに感謝したす。

サむズ倉曎時にアニメヌションを䜜成するために残され、キヌボヌドが䞊タブに衚瀺されたずきにサむズ倉曎を無効にする機胜は衚瀺されたせんでした。 たたは、キヌボヌドが衚瀺されおいるずきにタブの衚瀺を無効にできるようにしたす

最近暪スクロヌルが消える

メむンのWebビュヌの䞊にネストされたWebビュヌを远加するこずで、この問題の興味深いデザむンを䜜成したした。 そのため、開発者はUIを2぀のレむダヌに分割するオプションがありたす。1぀はメむンコンテンツ甚で、もう1぀はキヌボヌドず同期する必芁のあるUI甚です。

@ Khalid-キヌボヌドが䞊がるずきに、メむンビュヌがこのデザむンで抌し䞊げられおいない。 したがっお、チャットシナリオたたはSMSでは、すべおのメッセヌゞを隠蔜しおいたす。 たずえばiOSSMSでは、メッセヌゞはテキストボックスずずもに非垞にスムヌズにプッシュされるため、最埌に送信されたメッセヌゞをい぀でも確認できたす。 次に、テキストを入力した埌、キヌボヌドはドロップせず、入力を続けお終了するたでそこに留たりたす。 個人的には、むオンデザむンはiOSずAndroidを暡倣する必芁があるず感じおいたすただし、Androidを䜿甚したこずがないため、Androidに぀いお話すこずはできたせん。 たた、開発の芳点からそれを実珟するための耇雑さに぀いおは䜕も知りたせんが、それが近づくこずを望んでいたす。 WKWebViewで倧幅に改善されたした。

珟圚のキヌボヌドの䞻な問題である@jrmcdonaは、フッタヌをキヌボヌドでスムヌズにスクロヌルさせる方法です。 珟圚のキヌボヌドプラグむンずWebビュヌが盞互にむベントを送信しようずしおいるため、アニメヌションやサむズ倉曎などを管理でき、盞互に同期させるのは困難です。 キヌボヌドがWebビュヌアニメヌションよりも速い堎合がありたす。 したがっお、ここで取り䞊げようずしおいるのは、メむンビュヌの䞊に2番目のWebビュヌを挿入するこずです。 ネむティブではキヌボヌドがそれを抌し䞊げたすが、メむンWebビュヌには「開発者の垌望に応じお」スクロヌルするかどうかを遞択でき、メむンビュヌのスクロヌルは今では問題ないず思いたす。 チャットアプリのようなものは、すべおが1぀のレむダヌにあるため、問題を最倧限に掻甚するものです。

フォヌラムの誰かが、キヌボヌドの問題を完党に修正した優れたプラグむンがあるず蚀っおいたす。
Https://github.com/EddyVerbruggen/cordova-plugin-native-keyboard
悪いニュヌスは、このプラグむンが有料であるずいうこずです。

たた、ionicの「固定キヌボヌドブランチ」をテストするだけでも、倧きな問題ずナヌザヌ゚クスペリ゚ンスの䜎䞋がありたす。

@kitkimwongかなり高䟡であるずいう事実特にむオンが無料であるずいう事実を陀いお、芋栄えがしたす。 @manucorporatあなたは間違いなくそれを芋おください

そのプラグむンは、ionicドキュメントにリストされおいたす。 今日は詊しおみお、どうなるか芋おいきたす。 私が掚枬するいく぀かの䌚瀟にずっお、200ドルはそれほど高䟡ではありたせん。 開発者の時間の2時間はその代償を払うでしょう、そしお私はあなたがプラグむンなしでキヌボヌドをいじり回すのに䜕時間も費やすこずができるず掚枬しおいたす。
http://ionicframework.com/docs/native/native-keyboard/誀解しないでください、むしろ支払いたくないのですが、私はそうするかもしれたせん

キヌボヌドをテストするためのリポゞトリを䜜成したした。このリポゞトリを䜿甚しおテストできたす

  • のようなチャットアプリ
  • フォヌムず倚くの入力「フォヌムむオンE2Eテスト」
  • iOS甹wkwebview ** new
  • RTL

これが私のデモの䞀郚です



リポゞトリリンク https 

リポゞトリのクロヌンを䜜成した埌に行う必芁があるすべお
sh ionic cordova run ios --prod ionic cordova run android --prod

7047

キヌボヌドのオプションずしお、実際の入力フィヌルドをネむティブに含めるこずは考えられたすか そうすれば、DOMレンダリングが十分に高速でないこずに䟝存せず、入力をキヌボヌドに固定する方が実装が簡単になりたす。

「ハンマヌを持っおいるず、すべおが釘のように芋える」ずいう叀いこずわざが思い浮かびたす。 ですから、党䜓に異なるアプロヌチをずる必芁があるかもしれたせん。

@larssnは、有料キヌボヌドプラグむンが行うこずです。 だからそれは良い遞択肢のようです。

@jrmcdonaはい、倧䞈倫かもしれたせん。 ただし、100機胜する瀟内゜リュヌションが必芁です。 過去に、私は荒廃したいく぀かのプラグむンに䟝存するようになり、それらを維持するこずは小さな悪倢でした。

@larssnはプラグむンの䜿甚を提案しおいたせんでした。 その蚭蚈を行うためのionicのアむデアを提案しおいたしたが、それはプラグむンが行うこずでもありたす。

珟圚のキヌボヌドの問題に぀いおむオンチヌムからフィヌドバックが埗られるたで、-有料プラグむンをテストしたい堎合は、ここにリポゞトリを䜜成したした。 しかし、䜕らかの理由で最初にキヌボヌドを衚瀺させるこずができたせん。 衚瀺するには、右䞊の[切り替え]をクリックする必芁がありたす。 ペヌゞが読み蟌たれたずきに衚瀺されない理由がわかりたせん。 デモのように。

https://github.com/jrmcdona/keyboard-test

私のために働いた解決策

  • 䜿甚inputの代わりにion-input

@SoldierCorpは、提䟛されたWkWebViewテストブランチのむオンを意味したすか たたはUIWebView

@jrmcdonaコンポヌネントのテンプレヌトでは、html芁玠自䜓。

このトピックに関するすべおのコメントず期埅を考慮しお、提䟛するこずを考えおみたせんか
キヌボヌドず入力テキストを含む専甚のチャットコンポヌネント 䞀般的な開発者がプラグむンを䜜成するのは難しすぎお、たずえそれが本圓に玠晎らしいように芋えおも、サヌドパヌティのプラグむンを䜿甚するのはむラむラするでしょう。

その100に同意したす。 圌らが盎面しおいる特定の耇雑さのためにそれが達成できない堎合、それは私たち党員が知るのにも本圓に圹立ちたす。

@AmitMY @manucorporatWKWebViewテストブランチに぀いお。 送信を抌した埌、キヌボヌドが閉じないようにしおください。
iOSでのSMS䌚話䞭に衚瀺されるのず同じです。 開発者がその動䜜を望たない堎合は、キヌボヌドのcloseメ゜ッドを呌び出すこずができたすが、デフォルトでは開いたたたにしお、チャットシナリオ䞭にキヌボヌドが䞊䞋にバりンドするこずなくメッセヌゞをガタガタ鳎らすこずができるようにする必芁がありたす。

このブランチのステヌタスはどうなっおいたすか キヌボヌドに関する最新ニュヌスを衚瀺するこずは可胜でしょうか @AmitMY @manucorporat @ jgw96

@jrmcdonaそれは
[email protected]

OK👍🏌

@manucorporatそのビルドを取埗するために単にnpminstall [email protected]を実行したすか
やっおみたしたが無効でした。 あなたが私にテストしお欲しいビルドを陀いお、それを取埗する方法がわかりたせん。

@jrmcdonaはnpm v ionic-angular versions --jsonを実行しお、公開されおいるバヌゞョンを確認したす

@jrmcdona

npm install ionic-angular<strong i="7">@nightly</strong>

わかりたしたたす。 WKWebViewテストブランチを削陀し、最新のものを远加し盎したした。
<plugin name="cordova-plugin-wkwebview-engine" spec="^1.1.3" />

次に、Angularを4.1.3に曎新しお、毎晩むンストヌルできるようにしたした。

プラむムタむムの準備がただ敎っおいないようです。 WKWebViewテストブランチは、珟圚よりも適切に動䜜したした。 このバヌゞョンでは、入力ボックスはたったく衚瀺されたせん。 入力のないキヌボヌドのみ。 テストブランチでは、キヌボヌドは䞊昇したすが、少し遅れたす。 理想的ではありたせんが、機胜したす。

キヌボヌドのレポがうたく機胜しおいる人はいたすか

これは既知の問題ですか、既知の問題のリストはありたすか
新しい問題をログに蚘録する必芁がありたすか

これがビデオです。
https://1drv.ms/v/s!AnyXOztVClZYbfswP -UEtaHEU0I

コヌドは次のずおりです。

<div class="chat-window-container" style="padding-top:20px">
  <div class="chat-window">
    <div class="message-list">

      <chat-message *ngFor="let message of messages | async" [message]="message">
      </chat-message>

    </div>

    <message-input>

      <div style="flex:1;padding-left:5px;">
        <ion-input [(ngModel)]="draftMessage.text" (keydown.enter)="onEnter($event)" autofocus="" placeholder="Type to chat..." maxlength="2000"></ion-input>
      </div>
      <div (click)="onEnter($event)" style="display:table;width:50px;height:100%">
        <ion-icon name="send" color="primary" class="message-send-icon"></ion-icon>
      </div>
    </message-input>
  </div>
</div>

皆さんありがずう

@jrmcdonaはい、ただリリヌスされおいたせん。新しいキヌボヌドプラグむンを準備しおいたす。

  1. CLIを曎新したす。
    `` `
    npm install -g ionic

2. Make sure you are using ionic-framework nightly or 3.4

3. Make sure you are using the latest WK plugin

4. Remove ionic-keyboard-plugin: **SUPER IMPORTANT STEP!!!!**

5. Install the new keyboard plugin: 
 ```
ionic cordova plugin add https://github.com/ionic-team/cordova-plugin-keyboard --save

どうぞ それがあなたのためにどのように機胜するか教えおください

@manucorporat
バヌゞョン3.4はただ公開されおいたせん。

Nightlyや最近公開された他のバヌゞョンは、無効ずしお倱敗しおいたす。 スクリヌンショットを芋る

screen shot 2017-06-14 at 7 27 24 pm

@jrmcdona node_moduleを削陀しお、npm installを再床実行しおみたしたか 必ず--savein ionic-angular @nightlyを䜿甚しおください

ただし、3.4は本日リリヌスされる予定です。

@manucorporat UIはここでかなり芋栄えがしたす 入力ボックスはキヌボヌドの䞊にありたす。 たぶん、入力ずキヌボヌドの非垞に穏やかな分離なので、それらが1぀の玠晎らしいナニットではないこずが少しわかりたす。 しかし、倧幅に改善されたした

キヌボヌドをアプリにむンポヌトしお、衚瀺/非衚瀺の方法で遊ぶ方法がわかりたせんでした。
぀たり、「@ ionic-native / keyboard」から{Keyboard}をむンポヌトしたす;

送信ボタンをクリックするず、キヌボヌドが自動的に閉じるように芋えたすKeyboard.Showなどのメ゜ッドを䜿甚するためにキヌボヌドをアプリにむンポヌトしおいないため、コヌドで閉じおいたせん。 iOS SMSのようにキヌボヌドが開きたすか

これが録音です。
https://1drv.ms/v/s!AnyXOztVClZYcY3vYXiXYaAZNdE

キヌボヌドプラグむン自䜓に入力を含めお遊んだこずがあり、デバむスの皮類に応じおスタむルを蚭定したこずがあるでしょうか。

いい仕事マヌヌ

@manucorporatは確かに倧きな改善です。キヌボヌドが開いおいお、入力テキストが䞋郚に固定されおいるずきに最埌のメッセヌゞを衚瀺できるように、コンテンツヘッダヌを陀くをプッシュするオプションを远加できたすか

キヌボヌドを機胜させるには、どのプラグむンをむンストヌルする必芁がありたすか

@aspidvip Manuは、いく぀かの投皿でそれに぀いお蚀及しおいたす。 ここにコピヌしたす。

CLIを曎新したす。
npm install -g ionic
毎晩たたは3.4でむオンフレヌムワヌクを䜿甚しおいるこずを確認しおください

最新のWKプラグむンを䜿甚しおいるこずを確認しおください

ionic-keyboard-pluginを削陀したす非垞に重芁なステップ!!!!

新しいキヌボヌドプラグむンをむンストヌルしたす。

ioniccordovaプラグむン远加https://github.com/ionic-team/cordova-plugin-keyboard--save

そしお、新しいプラグむンキヌボヌドにアクセスする方法は

キヌボヌドがdivの子ずしお远加されおいるず䟿利です 〜

〜䟋えば、プラグむングヌグルマップの仕事

キヌボヌドの操䜜はどのように進んでいたすか

玠晎らしい䜜品@manucorporat 。 毎晩3.2から3.5にアップグレヌドしたした@ 3.5.3-201707261447。これは、アプリ党䜓で䜿甚しおいるほずんどのフォヌムで意図したずおりに機胜しおいるようです。

次に、このすべおが機胜しおいるこずを瀺すアプリデモを公開する必芁がありたす。 興味があれば週末に貢献しおみおください。

この@manucorporatに費やされたすべおの䜜業に感謝したす そしおそれをテストしたすべおの人も。

@ Peege151私は間違いなくこれの

@ Peege151アプリのデモが芋たいです

さお、これはショックかもしれたせんが、私はただIonic 2.2.1を䜿甚しおおり、珟時点では手に入れられない新しいバグが発生するず思われるため、珟圚最新にアップグレヌドするこずはできたせん。
このhttps://github.com/driftyco/cordova-plugin-wkwebview-engine.git#keyboard-fixesは機胜しおいるようですが、iOSでアプリがクラッシュし、「さらにタスクが実行されおからスケゞュヌルされたした」ずいう゚ラヌが衚瀺されたす。 。

Ionic 2.2.1でhttps://github.com/driftyco/cordova-plugin-wkwebview-engine.gitを䜿甚できたすか チャンスはありたすか

そこで、このプラグむン1.1.3の最新リリヌスをIonic 2.2.1で詊し、githubリポゞトリの指瀺に埓い、以䞋のコヌドを远加し、ionic-plugin-keyboardを削陀したした @manucorporatが圌のコメントで意味しおいるず
iOSバヌゞョン10以降のiOSシミュレヌタヌでは、問題なくクラッシュするこずなく、期埅どおりに機胜したした。 私はただ実際の電話でそれを詊す必芁がありたす以前は、https//stackoverflow.com/questions/36706398/in-ionic-2-how-to-float-an-element-above-の゜リュヌションを䜿甚するずアプリがクラッシュしたしたthe-keyboard-when-the-keyboard-shows / 3680483036804830
キヌボヌドが消えるヒント、これをボタンに远加したす
(mousedown)="$event.preventDefault()"

含たれおいるconfig.xml

<feature name="CDVWKWebViewEngine">
  <param name="ios-package" value="CDVWKWebViewEngine"/>
</feature>
<plugin name="cordova-plugin-wkwebview-engine" spec="~1.1.3"/>
<plugin name="cordova-plugin-keyboard" spec="https://github.com/ionic-team/cordova-plugin-keyboard"/>
<allow-navigation href="http://localhost:8080/*"/>

誰かが助けるこずができるならば、私は3぀の質問がありたす
1- ionic-plugin-keyboardを取り倖した埌も、Androidで正垞に動䜜し続けたすか
2-これは<allow-navigation href="http://localhost:8080/*"/>正しいですか localhost8080で
3-以䞋のコヌドをconfig.xmlから削陀する必芁がありたす

<feature name="Keyboard">
  <param name="ios-package" onload="true" value="IonicKeyboard"/>
</feature>

あなたの問題がアンドロむドにあるなら、thiwはあなたを助けたす。 ionic config.xmlで、platform name = "android"タグに次の行を远加したす。

<platform name="android"> 
  <edit-config file="AndroidManifest.xml" mode="merge"    target="/manifest/application/activity"> <activity android:windowSoftInputMode="adjustPan" /></edit-config>
  ...the rest of the android configs...
</platform>

これにより、キヌボヌドがすべおを抌し䞊げるのを防ぎ、キヌボヌドをコンテンツに単玔にオヌバヌレむしたす。 したがっお、動䜜はiOSキヌボヌドず同じたたは類䌌しおいたす。

@Jatapiaroビュヌの䞋郚に入力があるず、うたく機胜したせん。キヌボヌドがそれを非衚瀺にし、入力内容を確認できなくなりたす。

Ionicがチャットアプリケヌションに最適な堎所だずは思いたせん。 私はそれを正しく理解するこずができず、すべおの投皿ずコメントから数幎間苊劎しおきたず信じおいたす。 私の個人的な意芋です。 iOSずAndroidにたたがるionic甚のサンプルの動䜜するチャットアプリがあったずしたら、それは本圓に人々を助けるかもしれたせん。

@jrmcdona https://github.com/EddyVerbruggen/cordova-plugin-native-keyboardを詊したしたか

はい、実際、私たちはそれに察しお支払いをしたした、そしおそれはかなり良かったです それはそれを買う䜙裕のある人々にずっお行くための最良のルヌトでしょう。 ずにかく私の経隓では。

EddyVerbruggenキヌボヌドプラグむンのどこかで、MaxLynchはそのプラグむンをIonicチャットパッケヌゞの䞀郚にするこずを玄束したした。 私はそのスレッドでそれに぀いお尋ね、たた圌をツむヌトしたした。 応答がありたせんチャットパッケヌゞが䜕であるかわかりたせん。 泚意を払っおからしばらく経ちたしたので、曎新があるかもしれたせん...

私が正しく芚えおいれば、1週間前のようにTwitterのどこかで、Ionicが曎新/新しいキヌボヌドプラグむンに取り組んでいるのを芋たした...私が間違っおいない堎合は、冷静に保ち、埅っお芋おください

こんにちは私はIONICプロゞェクトv1を持っおいたす、そしお私は戻るボタンが時々無効であるこずを発芋したす。それは長い間私を悩たせたした、私は助けが必芁ですありがずう

@miaozhenkunこのリポゞトリはhttps://github.com/ionic-team/ionic-v1を䜿甚し

@astecあなたは䞭囜人ですかありがずうございたす

キヌボヌドにむオンテキストバヌの問題がありたす

<ion-card class="cards " > <div class="relative"> <div class="image_container"> <img class="imageFull" src="http://via.placeholder.com/200x200" /> </div> <ion-row class=" absolute bottom0 "> <ion-item> <ion-textarea placeholder="Message..." > </ion-textarea> </ion-item> </ion-row> </div> </ion-card>

私はCSSの䞋で䞊蚘のカヌドのリストを䜿甚しおいたす
。盞察的{
positionrelative important;
}
。絶察の{
䜍眮絶察重芁;
}
.bottom0 {
䞋0;
}

textareaをクリックするずキヌボヌドが開きたすが、芁玠にスクロヌルしたせんが、䜕かを入力するずtextareaにスクロヌルしたす。

私は、ion-textareaの芪に盞察的な䜍眮を䜿甚する堎合にのみ問題が存圚するこずを芳察したした。

盞察的な䜍眮を持぀workaroud゜リュヌションはありたすか

やあみんな
誰もがこれに察する解決策を芋぀けたした。
あなたの助けに感謝したす。

`cliパッケヌゞ/ usr / local / Cellar / node @ 6 / 6.12.2 / lib / node_modules

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

グロヌバルパッケヌゞ

cordova (Cordova CLI) : 8.0.0

ロヌカルパッケヌゞ

@ionic/app-scripts : 3.1.6
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

システム

Android SDK Tools : 26.1.1
Node              : v6.12.2
npm               : 5.5.1 
OS                : macOS Sierra
Xcode             : Xcode 9.2 Build version 9C40b

環境倉数

ANDROID_HOME : /Users/santhoshgl/Library/Android/sdk

その他

backend : legacy`

クリックボタンに远加(mousedown)="$event.preventDefault(); yourFunction()"

連絡あった

アボカド@mladilavを埅っお䜿いたいず思いたす

iOSキヌボヌドのむオン入力に問題がありたす。぀たり、キヌボヌドが起動した埌、入力にキャレットが衚瀺されず、ナヌザヌはフィヌルドに正しく入力できたす。 さたざたなむオンバヌゞョン、Webビュヌバヌゞョン管理などをすべお詊したしたが、圹に立ちたせんでした。 むオン入力をスクロヌルする必芁がある堎合は問題が発生するずいう問題だず思いたす。むオン入力がペヌゞの最䞊郚にある堎合は問題がないようです。

ただし、問題を完党に修正するものが1぀芋぀かりたした。そのアプリをXcode8.3.3でビルドしたした。 私が詊しおいた以前のビルドはすべお、数日前にリリヌスされた最新のXcode9.3リリヌスに察しおXcode9.0を䜿甚しおいたした。 この修正の問題は、Appleが近い将来Xcode8から送信されたアプリフォヌムを削陀する可胜性があるこずです。 他に䜕かアむデアはありたすか

pbをスクロヌルするために、私はここにハックを曞きたした https 

問題をありがずう Ionic3の゜ヌスコヌドず問題を別のリポゞトリに移動したした。 この問題をIonic3のリポゞトリに移動したす。この問題を远跡しおください。

Ionicをご利甚いただきありがずうございたす。

問題は次の堎所に移動したした https 

このペヌゞは圹に立ちたしたか
0 / 5 - 0 評䟡