في حالتي ، ينتج عن إضافة AppModule أدناه استيراد تجربة مستخدم أفضل نسبيًا من الإعدادات الافتراضية.

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

الحمد لله اخيرا تستجاب الدعاء

1. شريط البحث داخل علامة التبويب يدفع tabbar لأعلى.

كيف تختبر على Android؟
يسعدنا تقديم المساعدة دائمًا لنظام Android أو سطح المكتب. :)

يا @ mburger81 ، سؤال جيد! لا يوجد إصدار ليلي محدث من الزاوية الأيونية للخارج حتى الآن ، ولكن عندما نصدر إصدارًا ، سأقوم بتحديث هذه المشكلة بإرشادات حول كيفية تثبيته للاختبار على نظام Android.

حسنًا ، نحن نعمل على صفحة تسجيل دخول حيث لدينا بعض مشكلات تمرير الإدخال.
لذلك أعتقد أنه يمكننا التحقق من ذلك.

لمعلوماتك قبل أن نتمكن من اختبارها وإصدارها للمختبِر لدينا ، نحتاج إلى حل خطأ المشاهدات غير الصالحة (سعداء بالحدث الرئيسي) ، لأن هذه مشكلة عاجلة بالنسبة لنا

حصلت عليك! إذن فيما يتعلق بمسألة تمرير الإدخال ، هل يمكنك محاولة وضع الإدخال في منطقة من رؤيتك لا تغطيها لوحة المفاتيح عند فتحها؟

هذه فكرة جيدة. من الضروري التأكد من عدم تحرك المؤشر خلف الشريط عند التمرير

من الضروري التأكد من أن المؤشر لم يمنع أيون رأس ، عند التمرير

بعض ملاحظات iOS من أحد أعضاء فريقنا @ danbucholtz :

في عناصر التحكم الفردية التي لا تُستخدم عادةً داخل نموذج (على سبيل المثال ، إدخال بحث) ، هل يمكننا التحقيق في إغلاق لوحة المفاتيح عند "إرسال" أو "إدخال"؟

عند تنفيذ إجراء تنقل ، يتم إغلاق لوحة المفاتيح تلقائيًا إذا كانت مفتوحة. يجب أن نعيد النظر في هذا السلوك فيما يتعلق بالتراكبات. على سبيل المثال ، لا أستطيع أن أتخيل أن هناك العديد من حالات الاستخدام عند فتح الوسائط وإبقاء لوحة المفاتيح مفتوحة. تشير كل من 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.
            .
            .
            .

            }

من الضروري التأكد من أن المؤشر لم يمنع أيون رأس ، عند التمرير

هل هناك أي فرصة لإصلاح # 7047 أيضًا؟

كيف يعمل هذا في المتصفحات في الواقع؟ هل يضيف الأيوني أي وظائف إضافية تعطل المدخلات ، أم أن هذه مجرد مشكلة صعبة في حقول الإدخال على الهاتف المحمول؟

هذا الحل الخاص بي ، إنه يعمل بشكل جيد.

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 لم

@ mburger81

1. استخدم الطريقة this.keyboard.hideKeyboardAccessoryBar(true) المتوفرة بواسطة ion-native/keyboard إلى
   تعيين غطاء لوحة المفاتيح Page
2. عندما يركز المؤشر على الإدخال ، ستفتح لوحة المفاتيح. ثم تعيين ion-content الحشو القاع لإظهار ion-footer

لغتي الإنجليزية ليست جيدة جدًا ، أتمنى أن تفهم

على أي حال هنا باستخدام البرنامج المساعد WKWebView الذي تم ذكره في الموضوع الأول؟ أم أن كل هذه التعليقات تتعلق بـ UIWebView؟

@ jgw96 لقد اختبرت للتو WKWebView على جهاز iOS الخاص بي. تحسن بشكل كبير بالنسبة لي. يبدو أن حقل الإدخال لا يظل في أعلى لوحة المفاتيح بشكل جيد كما تتوقع ويتأخر ، ويظهر نوعًا ما في النهاية. هل هذه قضية معروفة؟

هل هذا iOS فقط؟ لم أختبر على Android ولكن هل يعمل هناك؟

تسجيل:
https://1drv.ms/v/s!AqSDIyRRHLbYazFGbIPhOGLC4sA

كوردوفا CLI: 6.4.0
إصدار الإطار الأيوني: 3.0.1
إصدار أيوني CLI: 2.1.14.0
إصدار ليب للتطبيق الأيوني: 2.1.7
إصدار البرامج النصية للتطبيق الأيوني: 1.3.0
إصدار iOS: 1.9.1
إصدار ios-sim: 5.0.12
نظام التشغيل: macOS Sierra
إصدار العقدة: v7.4.0
إصدار Xcode: Xcode 8.3.2 Build version 8E2002

مرحبًا manucorporat FYI من الاختبار الخاص بي. انظر المنشور أعلاه والتسجيل. تطبيقنا هو في الأساس تطبيق دردشة ، لذا سيكون من الرائع معرفة ما إذا كنت تعتقد أنه يمكن حل هذه المشكلة.

@ jgw96manucorporat هل يمكنك من فضلك التعليق على حالة هذا الاختبار ومتى ستصل الإصلاحات brnach إلى الإنتاج؟ أو ماذا بقي لفعله؟ سوف نقدر ذلك حقا.

@ jgw96 هل من الممكن أن تقوم بتحديث هذه المشكلة؟ يبدو أنه غاب عن المرحلة 3.3.0.

هل هناك حل رسمي قادم لمشكلات لوحة المفاتيح؟ لقد كان العمل مع Ionic 1 مؤلمًا ولا يزال لا يوجد حل رسمي لشيء مهم مثل لوحة المفاتيح.

nuvoPoint LoL ،

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

وهم فقط أغلقوا القضية .. LOL ...
لذا .. لقد تخليت عن الأيونية بسبب مشكلة لوحة المفاتيح منذ عام واحد ، والآن ، أعود إلى هنا لأرى ما إذا كانت لوحة المفاتيح قد تم إصلاحها ، لكن كما ترى ، ليس لديهم أي تقدم في هذا العام. :)

يبدو أنهم لا يريدون الحصول على إصلاح رسمي حتى لو كان هذا مكونًا أساسيًا لتطبيق بسيط !! سيفقد كل المطورين الذين يريدون إنشاء تطبيق دردشة. Input Box هو مكون أساسي يتفاعل مع المستخدم ، مع هذه المشكلة اللعينة يمكننا فقط استخدام IONIC لإنشاء بعض تطبيقات المعلومات البسيطة . وربما هذا هو تموضع الأيوني ...؟ هههه. لا أدري، لا أعرف.

وإذا رأيت المناقشة في المنتدى ، فالعديد من المطورين لديهم نفس المشكلة والإجابة:
استخدم Ionic لإنشاء تطبيق أصلي بسيط مثل تطبيق الدردشة غير ممكن:

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

يا رفاق ، يتم العمل على لوحة المفاتيح ، وهناك فرع لها في ملحق كوردوفا لـ wk إذا كنت ترغب في اختباره.

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

هذه هي الإصلاحات الحالية: https://github.com/ionic-team/cordova-plugin-wkwebview-engine/pull/131

حاول تثبيته ، ومعرفة ما إذا كان أفضل أم لا. الفريق يبحث عن ردود الفعل

تم تحريره:

AmitMY كيف تريد مني أن أنشر التعليقات؟ في هذا الموضوع؟

تم اختبار WKWebView على جهاز iOS الخاص بي. تحسن بشكل كبير بالنسبة لي.

المسألة الحالية:
يبدو أن حقل الإدخال لا يظل في أعلى لوحة المفاتيح بشكل جيد كما تتوقع ويتأخر ، ويظهر نوعًا ما في النهاية. هل هذه قضية معروفة؟

تسجيل:
https://1drv.ms/v/s!AqSDIyRRHLbYazFGbIPhOGLC4sA

الحزم العالمية:
@ الأيونية / cli-utils: 1.2.0
كوردوفا CLI: 7.0.1
أيوني CLI: 3.2.0

الحزم المحلية:
@ البرامج النصية الأيونية / التطبيق: 1.3.7
@ أيوني / cli-plugin-cordova: 1.2.1
@ الأيوني / cli-plugin-ionic-angular: 1.2.0
منصات كوردوفا: iOS 4.4.0
الإطار الأيوني: الأيونية الزاوية 3.0.1

النظام:
العقدة: v7.4.0
نظام التشغيل: macOS Sierra
Xcode: Xcode 8.3.2 إصدار الإصدار 8E2002
iOS-النشر: 1.9.1
ios-sim: 5.0.12

jrmcdona أعتقد أنه يجب عليك نشر التغذية المرتدة هنا. manucorporat سينظر إليها عندما يستطيع ذلك
حاول أن تجعله احترافيًا قدر الإمكان ، مثل - من الرائع أن يكون لديك مقطع فيديو ، ولكن اشرح أيضًا الخطأ في الفيديو (حتى نتمكن من تتبع المشكلات دون مشاهدة التسجيلات في كل مرة)

أي آمال في إصلاح علامات التبويب وفتح مشكلة لوحة المفاتيح؟

@ Floyd1256 اربطه هنا ، مع جميع المعلومات التي لديك. من المحتمل أن تتم مراجعة هذا الموضوع بأكمله في نهاية الأسبوع المقبل ، وسيتم إجراء الإصلاحات وفقًا للتعليقات

أحتاج إلى ميزة الدردشة في تطبيقي الأيوني.
لقد اختبرت cordova-plugin-wkwebview-engine.git # keyboard-fixes في مشروعي ، وقد تم إجراء تحسينات كبيرة.
ومع ذلك ، لا يزال هناك شيء لا يمكننا فعله مقارنة بإدارة لوحة المفاتيح الأصلية.
المرجع الخاص بي هو ميزة المراسلة على هاتفي ولكنها نفس الشيء بالنسبة لأكبر تطبيقات الدردشة المعروفة:
عندما نضغط لكتابة رسالة جديدة ، تظهر لوحة المفاتيح وتدفع نص الإدخال السفلي الثابت والرسائل الأخيرة ولكن ليس الرأس العلوي الثابت.
حركة الدفع سلسة ويمكننا رؤية الرسائل الأخيرة حتى عندما نكتب رسالة جديدة.
للحصول على مثال ، ما عليك سوى كتابة رسالة SMS وإرسالها باستخدام أي هاتف.

أرغب في أن يكون لدي نفس السلوك مع لوحة المفاتيح الأيونية على أجهزة android و ios و windows.
في لوحة المفاتيح الأيونية الحالية ، تكون رسوم الدفع المتحركة متقطعة وتقوم لوحة المفاتيح بدفع الإدخال السفلي الثابت ولكنها تغطي الرسائل الأخيرة (على جميع الأجهزة).
للاختبار فقط أضف إدخال نص في تذييل أيوني واكتب نصًا.
التحدي كبير ولكن لا يمكن للمستخدمين قبول لوحة المفاتيح كما هي ، والفجوة مع لوحة المفاتيح الأصلية صارخة.
خلاف ذلك ، شكرا على الإطار الأيوني الرائع.

اليسار لإنشاء الرسوم المتحركة عند تغيير الحجم والقدرة على تعطيل تغيير الحجم عندما تظهر لوحة المفاتيح لأعلى لم تظهر علامات التبويب! أو اجعل من الممكن تعطيل ظهور علامات التبويب عند عرض لوحة المفاتيح

يختفي التمرير جانبيًا مؤخرًا

لدي تصميم مثير للاهتمام لهذه المشكلة ، عن طريق إضافة عرض ويب متداخل أعلى عرض الويب الرئيسي. لذلك لدى المطور خيار فصل واجهة المستخدم إلى طبقتين ، واحدة للمحتوى الرئيسي ، والثانية لأي واجهة مستخدم تحتاج إلى مزامنتها مع لوحة المفاتيح.

@ Khalid-Nowaf أن وجهة نظرك الرئيسية لا تدفع للأعلى في هذا التصميم مع ارتفاع لوحة المفاتيح. لذلك في سيناريو الدردشة أو الرسائل القصيرة ، فإنك تتستر على جميع رسائلك. في iOS SMS على سبيل المثال ، يتم دفع الرسائل مع مربع النص بطريقة سلسة للغاية - بحيث يمكنك دائمًا رؤية آخر رسالة تم إرسالها. ثم لا تسقط لوحة المفاتيح بعد إدخال النص ، فإنها تظل هناك حتى تستمر في الكتابة وتغادر. أنا شخصياً أشعر أن التصميم الأيوني يجب أن يحاكي نظامي iOS و Android (على الرغم من أنني لا أستطيع التحدث عن Android لأنني لم أستخدم أيًا منهما). كما أنني لا أعرف أي شيء عن التعقيدات لتحقيق ذلك من وجهة نظر التنمية ولكن آمل أن يقترب. تحسن بشكل كبير بالنسبة لي مع WKWebView.

jrmcdona ، المشكلة الرئيسية في لوحة المفاتيح الآن ، هي كيفية جعل التذييل يتنقل بسلاسة باستخدام لوحة المفاتيح. المكوّن الإضافي الحالي للوحة المفاتيح وعرض الويب يحاولان إرسال أحداث أخرى ، حتى يتمكنوا من إدارة الرسوم المتحركة وتغيير الحجم .. إلخ ، ومن الصعب جعلهم متزامنين مع بعضهم البعض. في بعض الأحيان تكون لوحة المفاتيح أسرع من الرسوم المتحركة لعرض الويب. لذا فإن ما أحاول معالجته هنا هو تداخل عرض ويب ثانٍ أعلى العرض الرئيسي. وفي الأصل ستدفعه لوحة المفاتيح لأعلى ، في حين أن عرض الويب الرئيسي يمكن أن يكون لديه خيار التمرير أو عدم التمرير "اعتمادًا على ما يريده المطور" والتمرير في العرض الرئيسي ليس مشكلة الآن على ما أعتقد. تطبيق الدردشة مثل هو ما يصنع معظم المشكلة ، بسبب كل شيء في طبقة واحدة.

يقول شخص ما في المنتدى أن هناك مكونًا إضافيًا ممتازًا يعمل على إصلاح مشكلة لوحة المفاتيح تمامًا.
https://github.com/EddyVerbruggen/cordova-plugin-native-keyboard
النبأ السيئ هو أن هذا البرنامج المساعد مدفوع.

أيضًا ، بمجرد اختبار "فرع لوحة المفاتيح الثابتة" للأيوني ، لا تزال هناك مشكلة كبيرة وتجربة مستخدم سيئة.

kitkimwong Wow يبدو جيدًا ، باستثناء حقيقة أنه مكلف جدًا (خاصة بالنسبة لحقيقة أن الأيونات مجانية). manucorporat يجب عليك بالتأكيد إلقاء نظرة على ذلك

تم إدراج هذا المكون الإضافي في المستندات الأيونية. سأحاول تجربته اليوم وأرى كيف ستسير الأمور. 200 دولار ليست باهظة الثمن لبعض الشركات على ما أعتقد. ستدفع ساعتان من وقت المطورين مقابل ذلك ، وأعتقد أنه يمكنك قضاء ساعات في العبث باستخدام لوحة المفاتيح بدون المكون الإضافي.
http://ionicframework.com/docs/native/native-keyboard/ لا تفهموني بشكل خاطئ ، أفضل عدم الدفع ولكنني قد أفعل ذلك!

لقد قمت بإنشاء ريبو لاختبار لوحة المفاتيح ، مع هذا الريبو يمكنك اختباره

• تطبيق الدردشة مثل
• النماذج والكثير من المدخلات "من اختبار E2E الأيوني"
• wkwebview لنظام ios ** جديد
• RTL

هنا بعض من العرض الخاص بي

رابط الريبو: https://github.com/Khalid-Nowaf/ionic-keyboard

كل ما عليك فعله بعد استنساخ الريبو
sh ionic cordova run ios --prod ionic cordova run android --prod

7047

هل يمكن أن تكون فكرة تضمين حقل الإدخال الفعلي كخيار للوحة المفاتيح؟ بعد ذلك لن نعتمد على عدم سرعة عرض DOM بما يكفي ، وسيكون من الأسهل تنفيذ تثبيت الإدخال على لوحة المفاتيح.

يتبادر إلى الذهن القول المأثور "عندما يكون لديك مطرقة ، كل شيء يبدو وكأنه مسمار" ؛ لذلك ربما نحتاج إلى التعامل مع الأمر برمته بشكل مختلف.

larssn هذا ما يفعله المكون الإضافي للوحة المفاتيح المدفوعة. لذلك يبدو أنه خيار جيد.

jrmcdona قد يكون على ما يرام ، نعم. على الرغم من أنه يفضل أن يكون لديك حل داخلي يعمل بنسبة 100 ٪. في الماضي ، أصبحت أعتمد على العديد من المكونات الإضافية التي أصبحت في حالة سيئة ، وكان صيانتها بمثابة كابوس صغير.

larssn لم يقترح استخدام المكون الإضافي. كان اقتراح فكرتك على الأيونية للقيام بهذا التصميم يبدو جيدًا وهو أيضًا ما يفعله المكون الإضافي.

حتى نحصل على بعض التعليقات من الفريق الأيوني حول مشكلات لوحة المفاتيح الحالية ، - إذا أراد أي شخص اختبار المكون الإضافي المدفوع ، فقد قمت بإنشاء ريبو هنا. ومع ذلك ، لا يمكنني الحصول على لوحة المفاتيح لتظهر في البداية لسبب ما. لا بد لي من النقر فوق تبديل في الجزء العلوي الأيمن حتى يظهر. لا يمكن معرفة سبب عدم ظهورها أثناء تحميل الصفحة. مثل العرض.

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

حل يناسبني:

• استخدم input بدلاً من ion-input

SoldierCorp تقصد في WkWebView اختبار فرع الأيونية المقدمة؟ أو UIWebView؟

jrmcdona في قالب المكون ، عنصر html نفسه.

بالنظر إلى جميع التعليقات والتوقعات حول هذا الموضوع ، لماذا لا تفكر في تقديمه
مكون دردشة مخصص بما في ذلك لوحة المفاتيح ونص الإدخال؟ من الصعب جدًا إنشاء واحد من قبل المطورين المشتركين وسيكون من المحبط استخدام مكون إضافي تابع لجهة خارجية حتى لو كان يبدو رائعًا حقًا

أتفق مع ذلك بنسبة 100٪. إذا لم يكن من الممكن تحقيق ذلك بسبب بعض التعقيدات التي واجهوها ، فسيكون ذلك مفيدًا حقًا لنا جميعًا أن نعرفه.

manucorporatAmitMY فيما يتعلق فرع اختبار WKWebView. صدق أن لوحة المفاتيح يجب ألا تغلق بعد الضغط على إرسال.
تمامًا كما تراه أثناء محادثة الرسائل القصيرة في iOS. إذا كان المطور لا يريد هذا السلوك ، فيمكنه استدعاء طريقة إغلاق لوحة المفاتيح ولكن بشكل افتراضي يجب أن يظل مفتوحًا حتى يتمكن الأشخاص من إرسال الرسائل أثناء سيناريو الدردشة دون ارتداد لوحة المفاتيح لأعلى ولأسفل.

ما هو الوضع مع هذا الفرع؟ هل سيكون من الممكن جعل آخر الأخبار حول لوحة المفاتيح مرئية؟ AmitMYmanucorporat @ jgw96

jrmcdona تم دمجه في Master. لا تتردد في تجربته:
أيوني- مستطيل @ 3.3.0-201706131302

طيب! 👍🏼

manucorporat هل أقوم ببساطة بتثبيت npm [email protected] للحصول على هذا
حاولت ذلك لكنه كان غير صالح. لست متأكدًا من كيفية الحصول على ذلك باستثناء البناء الذي تريد مني اختباره.

jrmcdona قم بتشغيل npm v ionic-angular versions --json لمعرفة الإصدارات المنشورة

تضمين التغريدة

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

طيب شكرا manucorporat . أزلت فرع اختبار 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 تثبيت -g الأيونية

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

مسرور! اسمحوا لي أن أعرف كيف يعمل من أجلك

تضمين التغريدة
لم يتم نشر الإصدار 3.4 بعد.

Nightly والإصدارات الأخرى المنشورة مؤخرًا فشلت بالنسبة لي باعتبارها غير صالحة. انظر لقطة الشاشة

jrmcdona هل حاولت إزالة node_module وتشغيل تثبيت npm مرة أخرى؟ تأكد من استخدام - حفظ في الأيونية الزاوية @ ليلاً.

ومع ذلك ، سيتم إصدار 3.4 اليوم.

manucorporat UI تبدو جيدة هنا! يظل مربع الإدخال أعلى لوحة المفاتيح. ربما يكون هناك فصل بسيط جدًا بين المدخلات ولوحة المفاتيح حتى تتمكن من معرفة أنها ليست وحدة واحدة جيدة. لكن شاسعة تحسن!

لم أكن متأكدًا من كيفية استيراد لوحة المفاتيح إلى التطبيق للعب باستخدام طرق إظهار / إخفاء.
(على سبيل المثال ، استيراد {Keyboard} من "@ ionic-native / keyboard"؛)

يبدو أنه إذا نقرت على زر الإرسال ، فستغلق لوحة المفاتيح تلقائيًا (لن أقوم بإغلاقها في الكود لأنني لا أقوم باستيراد لوحة المفاتيح إلى التطبيق لاستخدام طرق Keyboard.Show وما إلى ذلك) لوحة المفاتيح مفتوحة مثل كيفية عمل iOS SMS؟

هنا تسجيل.
https://1drv.ms/v/s!AnyXOztVClZYcY3vYXiXYaAZNdE

أتساءل عما إذا كنت قد لعبت في أي وقت مضى مع تضمين الإدخال مع المكون الإضافي للوحة المفاتيح نفسها وهل تم تصميمه وفقًا لنوع الجهاز؟

عمل جيد مانو!

manucorporat بالفعل تحسينات رائعة ، هل يمكنك إضافة خيار لدفع المحتوى (باستثناء الرأس) حتى نتمكن من رؤية الرسائل الأخيرة عندما تكون لوحة المفاتيح مفتوحة ويتم إصلاح نص الإدخال في الأسفل؟

ما هي المكونات الإضافية التي أحتاج إلى تثبيتها حتى تعمل لوحة المفاتيح؟

aspidvip Manu يذكر ذلك بضع مشاركات مرة أخرى. سأقوم بنسخه هنا.

تحديث CLI:
npm تثبيت -g الأيونية
تأكد من أنك تستخدم الإطار الأيوني ليلاً أو 3.4

تأكد من أنك تستخدم أحدث مكون إضافي لـ WK

إزالة البرنامج المساعد الأيوني للوحة المفاتيح: خطوة مهمة للغاية !!!!

قم بتثبيت المكون الإضافي الجديد للوحة المفاتيح:

إضافة أيوني كوردوفا المساعد https://github.com/ionic-team/cordova-plugin-keyboard - حفظ

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

أو

https://github.com/driftyco/cordova-plugin-wkwebview-engine.git

؟؟؟؟؟؟

وكيف يمكن الوصول إلى لوحة مفاتيح إضافية جديدة؟

من الجيد إضافة لوحة المفاتيح كطفل في 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 مع ظهور الخطأ "تم تنفيذ المزيد من المهام ثم تمت جدولة" .

هل يمكنني استخدام https://github.com/driftyco/cordova-plugin-wkwebview-engine.git مع الإصدار الأيوني 2.2.1؟ أي فرصة؟

لذلك جربت الإصدار الأخير من هذا المكون الإضافي 1.1.3 مع Ionic 2.2.1 ، واتبعت التعليمات في github repo ، وأضفت الكود أدناه وأزلت لوحة المفاتيح الأيونية (افترضت أن هذا هو ما يعنيه manucorporat في تعليقه) - قام بتثبيت npm للمكون الإضافي ، وقام ببناء التطبيق وجربه.
على جهاز محاكاة iOS مع الإصدار 10+ من نظام التشغيل iOS وعمل بشكل جيد كما هو متوقع دون أي مشاكل أو تعطل لا يزال يتعين علي تجربته على هاتف حقيقي (تعطل تطبيقي سابقًا عند استخدام الحل هنا https://stackoverflow.com/questions/36706398/in-ionic-2-how-to-float-an-element-above- لوحة المفاتيح عندما تظهر لوحة المفاتيح / 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/*"/>

لدي ثلاثة أسئلة ، إذا كان بإمكان أي شخص المساعدة:
1- هل ستستمر الأشياء في العمل بشكل طبيعي على Android بعد إزالة لوحة المفاتيح الأيونية؟
2- هل هذا <allow-navigation href="http://localhost:8080/*"/> صحيح؟ مع المضيف المحلي: 8080 ؟
3- هل يجب علي إزالة هذا الرمز أدناه من ملف config.xml

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

إذا كانت مشكلتك على android ، فسوف يساعدك thiw. في الملف config.xml الأيوني ، أضف الأسطر التالية في اسم النظام الأساسي = علامة "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 فقد يساعد الأشخاص حقًا.

jrmcdona هل جربت https://github.com/EddyVerbruggen/cordova-plugin-native-keyboard ؟

نعم ، في الواقع ، لقد دفعنا ثمن ذلك وكان جيدًا جدًا! سيكون هذا هو أفضل طريق للذهاب للأشخاص الذين يمكنهم تحمل كلفته. في تجربتي على أي حال.

في مكان ما في البرنامج المساعد EddyVerbruggen للوحة المفاتيح ، قام Max Lynch بتوجيه جعل هذا المكون الإضافي جزءًا من حزمة الدردشة الأيونية. سألت عنه في هذا الموضوع وقمت أيضًا بالتغريد. لم أحصل على رد لست متأكدًا من موضوع حزمة الدردشة. لقد مرت فترة من الوقت منذ أن انتبهت لذلك ربما يكون هناك تحديث حول ذلك ...

إذا كنت أتذكر بشكل صحيح أنني رأيت في مكان ما على تويتر مثل قبل أسبوع أن Ionic تعمل على تحديث / مكون إضافي جديد للوحة المفاتيح ...

مرحبًا لدي مشروع IONIC v1 ، واكتشفت أن زر العودة غير صالح في بعض الأحيان ، لقد أزعجني لفترة طويلة ， أحتاج إلى مساعدة شكرًا

miaozhenkun هذا الريبو مخصص لـ Ionic v3 + ، للاستخدام v1 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 أدناه
.نسبيا{
الموقف: نسبي ! مهم ؛
}
.مطلق{
الموقف: مطلق ! مهم ؛
}
.bottom0 {
أسفل: 0؛
}

عندما أقوم بالنقر فوق textarea ، فإنه يفتح لوحة المفاتيح ولكنه لا ينتقل إلى العنصر ، ولكن عندما أكتب شيئًا ما ، فإنه ينتقل إلى منطقة النص.

لقد لاحظت أن المشكلة لا توجد إلا إذا استخدمنا نسبيًا موضعيًا لأي والد من منطقة النسيج الأيوني.

أي حلول بديلة مع الموقف النسبي؟

مرحبا شباب!
لقد وجد أي شخص حلاً لهذا.
هو محل تقدير مساعدتكم.

حزم 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()"

أى اخبار؟

أعتقد أنك سترغب في الانتظار واستخدام Avocadomladilav

لقد واجهتنا مشكلة مع لوحة مفاتيح iOS الخاصة بنا في المدخلات الأيونية ، باختصار ، لن يتم تقديم حرف إقحام للإدخال بعد ظهور لوحة المفاتيح ، ويمكن للمستخدم الكتابة بشكل صحيح في الحقل. لقد جربت مجموعة متنوعة من الإصدارات الأيونية المختلفة ، وإصدارات عرض الويب ، وما إلى ذلك دون جدوى. أعتقد أنها مشكلة حيث إذا كان الإدخال الأيوني بحاجة إلى التمرير إليه ، فستواجه مشاكل ، إذا كان الإدخال الأيوني في أعلى الصفحة ، فلا يبدو أن لديه مشكلة.

ومع ذلك ، وجدت شيئًا واحدًا أدى إلى حل مشكلتنا تمامًا: لقد أنشأت هذا التطبيق في Xcode 8.3.3. كانت جميع الإصدارات السابقة التي كنت أحاولها تستخدم Xcode 9.0 لأحدث إصدار Xcode 9.3 الذي تم إصداره قبل يومين. المشكلة في هذا الإصلاح هي ، أعتقد أن Apple قد تسقط نموذج التطبيقات المقدم من Xcode 8 في المستقبل القريب. أي شخص لديه أي أفكار أخرى؟

للتمرير pb ، كتبت الاختراق هنا: https://github.com/ionic-team/ionic/issues/10629#issuecomment -395084125

شكرا على المشكلة! لقد نقلنا الكود المصدري والمشكلات الخاصة بـ Ionic 3 إلى مستودع منفصل. أنقل هذه المشكلة إلى مستودع Ionic 3. الرجاء تتبع هذه المشكلة هناك.

شكرًا لك على استخدام Ionic!

تم نقل الإصدار إلى: https://github.com/ionic-team/ionic-v3/issues/827