Ionic-framework: المشكلة (النماذج): مشكلات الإدخال والتمرير ولوحة المفاتيح للنماذج

تم إنشاؤها على ١٩ أبريل ٢٠١٦  ·  109تعليقات  ·  مصدر: ionic-team/ionic-framework

في الوقت الحالي ، يمكن أن تكون الطريقة التي يتعامل بها Ionic مع إدخال النموذج أفضل. كان لدى Ionic 1 إعدادات افتراضية رائعة لإدخالات النموذج فيما يتعلق بمعالجة لوحة المفاتيح ، وتمرير المحتوى ، وما إلى ذلك. يحتاج Ionic 2 إلى أن يكون متسقًا ، والأهم من ذلك ، أن يعمل بشكل صحيح لإدخالات النموذج بشكل متسق عبر جميع الأنظمة الأساسية (iOS ، Android ، Windows).

انظر هذا الريبو للحصول على مثال الكود الذي يجب تشغيله على الأجهزة: https://github.com/dylanvdmerwe/ionic2-formtest

ذكري المظهر:

  • [x] 1. عند اختيار إدخال ، يجب تمرير محتوى النموذج بالكامل بحيث يكون العنصر المحدد مرئيًا بعد عرض لوحة المفاتيح.
  • [x] 2. عندما تكون لوحة المفاتيح مخفية ، اضبط التمرير للخلف إلى موضعه الأصلي وقم بإزالة الحشوة المضافة.
  • [x] 3. لمس منطقة ليست مدخلاً يرفض لوحة المفاتيح.
  • [] 4. إذا اختار المستخدم مدخلاً ثانيًا بعد ملء الإدخال الأول ، فيجب تمرير الشاشة للتركيز على حقل الإدخال المحدد حديثًا.
  • [x] 5. تحتوي بعض لوحات المفاتيح على زر "تالي" و "سابق" و "تم".
  • [x] 6. دعم التصحيح التلقائي والإكمال التلقائي والرسملة التلقائية وتوليفات منها.

    iOS:

  • [x] 1. عند اختيار إدخال ، يجب تمرير محتوى النموذج بالكامل بحيث يكون العنصر المحدد مرئيًا بعد عرض لوحة المفاتيح.

  • [x] 2. عندما تكون لوحة المفاتيح مخفية ، اضبط التمرير للخلف إلى موضعه الأصلي وقم بإزالة الحشوة المضافة.
  • [x] 3. لمس منطقة ليست مدخلاً يرفض لوحة المفاتيح.
  • [x] 4. إذا اختار المستخدم مدخلاً ثانيًا بعد ملء الإدخال الأول ، فيجب تمرير الشاشة للتركيز على حقل الإدخال المحدد حديثًا.
  • [] 5. تحتوي بعض لوحات المفاتيح على زر "تالي" و "سابق" و "تم". يجب ربط هذه في مدخلات النموذج على الصفحة للسماح للمستخدم بالتنقل عبر خيارات الإدخال.
  • [x] 6. دعم التصحيح التلقائي والإكمال التلقائي والرسملة التلقائية وتوليفات منها.

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

أي إصدار أيوني؟ 2.x

قم بتشغيل ionic info من الطرفية / موجه أوامر cmd: (الصق الإخراج أدناه)
كوردوفا CLI: 6.1.1
إصدار الإطار الأيوني: 2.0.0-beta.4-201604170622
إصدار CLI الأيوني: 2.0.0-beta.24
إصدار ليب التطبيق الأيوني: 2.0.0-beta.14
نظام التشغيل:
إصدار العقدة: v5.7.0

التعليق الأكثر فائدة

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

ال 109 كومينتر

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

ينطبق أيضًا على الإكمال التلقائي والتصحيح التلقائي ، ويتم تعطيلهما افتراضيًا ما لم تتم إضافتهما على وجه التحديد إلى العنصر: https://github.com/driftyco/ionic/blob/2.0/ionic/components/input/input-base.ts # L217

هل تعتقد أنه يجب تعطيل الكتابة بالأحرف الكبيرة تلقائيًا بشكل افتراضي أيضًا؟

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

  • لا يمكنني الحصول على أزرار لوحة المفاتيح على iOS للتبديل بين المدخلات المختلفة. إنهم "مرتبكون" ويتم إغلاق لوحة المفاتيح في النهاية. ما زلت بحاجة إلى الاختبار على Android عندما أختبر باستخدام لوحات المفاتيح الأخرى التي تحتوي على هذه الأزرار.
  • لست متأكدًا مما هو الأفضل للإعدادات الافتراضية للإكمال التلقائي والتصحيح التلقائي. في iOS لأنواع معينة من لوحة المفاتيح يتم تمكينها افتراضيًا - لكنني أعتقد أنه من الأفضل اتباع القواعد القياسية <input> ؟
  • سأختبر بعض التباديل للإكمال التلقائي والرسملة التلقائية بعد قليل. ملاحظة لقد قمت بتسجيل هذا بشكل منفصل هنا عندما تغير المكوِّن الإضافي للوحة المفاتيح.

يرجى ملاحظة أنني أختبر هذه على الأجهزة الفعلية.

adamdbradley لقد قمت بتحديث العناصر أعلاه. الأشياء المعلقة هي قضايا محددة يمكن استنساخها.

أين نحن من مشكلة Android رقم 1؟ إنه يفسد تطبيقي تمامًا بدونه.

+1 على إصدار Android رقم 1 :)

أي حركة على البنود المدرجة في هذا العدد؟

dylanvdmerwe بمجرد إصدار الإصدار التجريبي التالي (beta8) سنركز على إصلاح مشكلات مثل هذه. معذرة المضايقات

+1 على إصدار Android رقم 1 :)

+1 في مشكلة Android:

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

هذا يمنعني من النقل بالكامل من أيوني 1 إلى أيوني 2.
أتمنى لك كل خير!

هذا يمنعني من النقل بالكامل من أيوني 1 إلى أيوني 2.

كذلك هنا.

+1 على إصدار Android رقم 1
الرجاء إصلاح هذا في أقرب وقت ممكن! لقد بدأنا تطبيقًا جديدًا على هذا ، لكن لا نريد أن يكون هذا الخطأ بمثابة عامل كسر للصفقة ويجعلنا نعود إلى أيوني 1!

adamdbradley ، @ jgw96 هل هناك بعض الحلول الآن؟

هل يمكنك إعطاء تحديث من فضلك؟ يصعب عرض هذه الوظيفة الأساسية مع عدم عمل ...
شكرا!

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

اهلا جميعا! يمكنني أن أؤكد لكم أننا نعمل بجد لحل قضايا مثل هذه. هل ترى جميعًا هذه المشكلة بشكل أساسي على نظام التشغيل iOS أو Android؟ أم يحدث على كليهما؟

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

أهلا،

أرى العديد من المشكلات الأخرى على iOS على الجهاز (لم يتم التحقق منها على Android):

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

شكرًا على العمل الجيد الذي تم إجراؤه على Ionic ، ونتطلع إلى حل مشكلات las!

نفس المشكلة مع لوحة المفاتيح ومدخلات الأيونات في Android. قضية مهمة جدا في جميع التطبيقات مع النماذج!

لا تحديث لهذه القضية الحرجة؟

أي تعديل حدث في هذه القضية؟

أود أن يتم النظر إلى هذا في RC القادم.

تحديث على هذا. # 5 لنظام iOS لا يمكنني التكاثر. هذا يعمل بشكل جيد بالنسبة لي في الماجستير ، هل يمكن لأحد أن يؤكد؟

أبحث في # 1 الآن.

أواجه نفس المشكلة. هل هناك أي تحديثات على نفسه؟ .

على iOS # 1 لا يعمل بشكل جيد على الشاشات الكبيرة (iPad). يتم تمرير الإدخال إلى الأعلى ، بينما سيكون من الرائع جعله أقرب إلى لوحة المفاتيح.

أهلا،

استغرق الأمر بعض الوقت للتحقيق في المشكلة ، حيث حدثت على عدة أجهزة من جانبنا.

ذكري المظهر:

  • يبدو جيدًا عند تمكين scrollAssist
  • لا يزال هناك بعض الأخطاء عند التبديل من إدخال أيوني إلى آخر عندما تكون لوحة المفاتيح مفتوحة بالفعل (انتقل الصفحة لأعلى كثيرًا).

iOS:

  • لأول مرة ، لا يتم تمرير الصفحة
  • في المرة الثانية ، يتم تمرير الصفحة لأعلى بدقة في أي إدخال للصفحة
  • كما هو الحال في Android ، عند التبديل بين الحقل ، يتم تمرير الصفحة كثيرًا.

بعد إجراء بعض البحث ، اكتشفنا أن scroolView.scrollTo لاستخدام خاصية scrollTop HTML.
هذه الخاصية مقيدة بالقيمة النظرية: scrollHeight - clientHeight.

لقد أضفنا للتو الأسطر التالية إلى scroll-view.js (node_modules / ionic-angular / util /):
console.log (fromY + '=>' + y) ؛
console.log ('القيمة النظرية القصوى:' + (this._el.scrollHeight - this._el.clientHeight)) ؛
ويبدو أن المشكلة واضحة.

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

دورك ؛)

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

لا يزال هناك بعض الأخطاء عند التبديل من إدخال أيوني إلى آخر عندما تكون لوحة المفاتيح مفتوحة بالفعل (انتقل الصفحة لأعلى كثيرًا).

مرحبا adamdbradley

خطوة لإنشاء المثال أدناه. لقطة الشاشة مأخوذة من المحاكي ، لكننا نعيد إنتاج نفس السلوك على الأجهزة. النموذج هنا لإضافة بعض الألوان (أزرق = حقل مركّز ، أحمر = حقل آخر).

خطوة للتكاثر

خطوة لخلق مثال

  • تم إنشاء مشروع جديد (بداية أيونية -v2 myApp) => RC2
  • تمت إضافة scrollAssist في منشئ التطبيق الخاص بي
    constructor(config: Config, platform: Platform) { config.set('scrollAssist', true); ... }
  • عدلت my home.html & home.ts & إضافة بسيطة إلى ملفات scss

<ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> <div class='takePlace'>Bla bla</div> <form novalidate [formGroup]="form"> <ion-item> <ion-input type="tel" pattern="[0-9]{3}" formControlName="dummyField"></ion-input> </ion-item> <ion-item> <ion-input formControlName="dummyField2"></ion-input> </ion-item> </form> </ion-content>

import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { public form: FormGroup; constructor(private formBuilder: FormBuilder) { this.form = this.formBuilder.group({ dummyField: ['', [Validators.required, Validators.pattern('[0-9]{3}')]], dummyField2: ['', [Validators.required, Validators.pattern('[0-9]{3}')]] }); } ngOnInit() { } }

.takePlace { height: 300px; border: 1px solid red; }

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

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

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

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

يعمل بشكل أفضل في الليل!

لقد وجدت خطأ قدمته التغييرات الأخيرة بالرغم من ذلك. إذا كان هناك تركيز على الإدخال A وقمت بالنقر فوق الإدخال B ، فإن لوحة المفاتيح تختفي ولن يتم التركيز على أي من المدخلات.

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

تحرير: هذا يستخدم WKWebView. لم تختبر UIWebView.

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

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

adamdbradley يُظهر هذا الفيديو "القفز إلى الموضع بدلاً من التمرير السلس" ويظهر أيضًا خطأ لاحظته ، أنه إذا ركزت على إدخال واضغطت على زر رجوع للجهاز ، فلن يتم تمرير المحتوى للخلف.
تحرير: تغيير حجم gif.

ezgif com-cb02e8c895

adamdbradley هذه هي مشكلة تركيز الإدخال ، حيث تختفي لوحة المفاتيح بدلاً من تركيز الإدخال الذي تم النقر عليه.

focus-keyboard

وهذا على Android ، حيث عند التركيز ، يقوم النموذج الخاص بي بقفزة مفاجئة ، ويكون الإدخال المركّز الأول غير مرئي على الشاشة:

keyboard-jump

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

@ jgw96 مرحبا! لقد اختبرت 2.0.0-rc.3-201611302233 ولم يتغير شيء ، لذا لا تزال تسجيلات gif مشكلات صالحة.

شكرا للاختبار biesbjerg ! هل يمكنك نشر ريبو أو إنشاء ملف نصي يمكنني استخدامه لإعادة إظهار هذه المشكلة؟

@ jgw96 هنا تذهب! https://github.com/biesbjerg/6228-ionic-keyboard-issues

خطوات:

  1. git clone https://github.com/biesbjerg/6228-ionic-keyboard-issues.git
  2. cd 6228-ionic-keyboard-issues
  3. npm install
  4. mkdir www (مطلوب بسبب خلل في كوردوفا / أيوني حيث يحتاج www إلى الوجود أو يفشل تثبيت البرنامج المساعد)
  5. ionic state reset
  6. تشغيل على الأجهزة

المشكلة كما هو موضح في فيديو iOS هي مشكلة في UIWebView وكذلك WKWebView.

تتعلق مشكلة Android بشيء ما يتعلق بالمحتوى الخاص بي الذي يتم توسيطه عموديًا باستخدام flexbox ، ولكن يجب أن يتصرف بشكل طبيعي حتى مع imo.

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

مرحبًا @ jgw96! رائع! :-)

Touching an area that is not an input dismisses the keyboard.

أرى هذا الجزء (جيدًا ، وأجزاء أخرى) به علامة اختيار بجواره ؛ هل هذا يعني أنه سيكون في الإصدار القادم؟ سيكون هذا رائعًا لتطبيقات الدردشة التي تحتوي على زر إرسال في <ion-footer> أعلى لوحة المفاتيح! ثم لن يتم إغلاق لوحة المفاتيح دائمًا بعد النقر فوق الزر إرسال

مرحبا جميعا. ولدي أيضا نفس المشكلة. وألاحظ بعض الشيء.
عندما لا يتم تحديد المدخلات لدينا هذه الحالة.

1jpg

لكن عندما نختاره ، لدينا هذا

2

نتيجة لذلك اتخذت تلك الخطوة السيئة مع! المهم

3

وهو يعمل بالنسبة لي كحل مؤقت.

لذا .. تصبح الأمور فوضوية حقًا عندما يكون لديك شيء يستخدم الموضع: نسبي.

في هذا المثال ، يكون الشعار هو العنصر ذو الموضع النسبي ، وإذا ضغطت على الإدخال الأول فسيصبح مثل هذا:
outro

لكن الضغط على الإدخال الثاني يدفع الشعار أيضًا:
photo569187513406696003

@ jgw96 أي أخبار عن هذه القضية وحول RC.4؟

أنا أيضًا آمل حقًا أن يكون لدي أي أخبار حول هذه المشكلة ، موكلي يمارس الكثير من الضغط 🙉

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

yannbf ، لكي نكون منصفين ، لا يزال Ionic 2

أنا أفهم ذلك وأجده معقولًا حقًا. كنت أتمنى فقط الحصول على تحديث لنقله. أنا ممتن جدًا لما فعله الفريق الأيوني.

على أي حال ، كيف يمكنني اختبار تطبيقي الحالي بذلك كل ليلة؟

yannbf npm install ionic-angular<strong i="6">@nightly</strong> --save
ولا تنس تحديث package.json الخاص بك إلى angular 2.2.1

يعمل بشكل أفضل مع الليل! شكرا يا شباب

اهلا جميعا! شكرا لاستخدام Ionic! biesbjerg و yannbf ، هل rc4 والاختبار من فضلك؟ يحتوي هذا الإصدار على الكثير من إصلاحات تمرير الإدخال التي نأمل أن تعمل على إصلاح مشكلات الرجل. شكرا!

@ jgw96 نعم ، فعلتها بالفعل. إنها طريقة أفضل بكثير! حريصة على الإصدار النهائي 😄

@ jgw96 بعد تحديث الأشياء ، position:absolute أو position:fixed لا تزال متأثرة. تمكنت من التنقل من تلك الصفحة مع الشعار الذي أرسلته من قبل (باستخدام نهج آخر ، إزالة الموضع المطلق) ، ولكن كما في الصفحة التالية ، يجب أن يكون لدي "شروط اتفاقية" في أسفل الصفحة ، ما زلت أواجه المشكلة :

selection_002

ها هو الكود:

<div class="agreement-text">
    <p>paragraph's content..</p>
</div>

و CSS:

.agreement-text {
    position: fixed;
    padding: 10px;
    margin-top: 40px;
    bottom: 0;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    a {
      color: rgb(250, 231, 124);
    }
}

في حالتي ، بعد التحديث إلى RC5 ، تظل مشكلة إدخال القفز على Android قائمة. لقد بدأت للتو مشروعًا جديدًا باستخدام القالب الفارغ وقمت بنسخ مكون الإدخال الأيوني من التوثيق إلى محتوى أيون ، وهو السلوك أدناه.

jumping input

كما ترون كل عنصر يقفز باستثناء الأول.
للسجل هذا هو ناتج الأمر ionic info .

كوردوفا CLI: 6.4.0
إصدار الإطار الأيوني: 2.0.0-rc.5
إصدار أيوني CLI: 2.2.1
إصدار ليب التطبيق الأيوني: 2.2.0
إصدار البرامج النصية للتطبيق الأيوني: 1.0.0
إصدار iOS: غير مثبت
إصدار ios-sim: غير مثبت
نظام التشغيل: Windows 10
إصدار العقدة: v6.9.2
إصدار Xcode: غير مثبت

@ almr193 أن السلوك يبدو صحيحا. يتم تمرير الشاشة لأن لوحة المفاتيح ستكون مرئية على الأجهزة المحمولة. يضمن التمرير أن يكون الإدخال المميز مرئيًا دائمًا ولا يتم تغطيته بواسطة لوحة المفاتيح على الشاشة.

dylanvdmerwe شكرًا لك على الرد السريع ، السيناريو الذي قدمته يبدو صحيحًا وأنا أفهم أن الشاشة تنتقل بينما تظهر لوحة المفاتيح نفسها على الشاشة. ومع ذلك ، لدي سيناريو آخر غريب مع ion-input ضمن ion-list مع تمكين إعادة ترتيب العنصر. الإدخال يقفز خارج الحدود ولا يمكن للمستخدم رؤية ما تتم كتابته.

jumping

@ almr193 نعم ، لا تزال هذه مشكلة لم يتم حلها ، للأسف.
راجع عنصر Android 1) و 4) للمنشور الأولي أعلاه.

+1 لم يتم حلها بعد. لا يبدو أن أي طرق من لوحة المفاتيح باللغة الأيونية تساعد على Android

لدي مشكلة في استخدام الشرائح + المدخلات. يُظهر سلوكًا غريبًا جدًا بعدم القيام بأي تمرير.

ezgif com-resize

+1

كوردوفا CLI: 6.4.0
إصدار الإطار الأيوني: 2.0.0
إصدار أيوني CLI: 2.1.18.1
إصدار ليب التطبيق الأيوني: 2.1.9
إصدار البرامج النصية للتطبيق الأيوني: 1.0.0
إصدار iOS: غير مثبت
إصدار ios-sim: 5.0.13
نظام التشغيل: macOS Sierra
إصدار العقدة: v6.9.4
إصدار Xcode: Xcode 8.2.1 Build version 8C1002

+1

لا تزال هذه مشكلة مع أحدث وأكبر كوردوفا وأيوني.

هل هناك حل أو حل بديل؟

-- محدث --

عند بدء الكتابة ، يتم تمرير الإدخال إلى العرض ولكن عندما يتم عرض لوحة المفاتيح في البداية ، يتم حجب الإدخال بواسطة لوحة المفاتيح.

-

Your system information:

Cordova CLI: 6.5.0 
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: OS X El Capitan
Node Version: v6.1.0
Xcode version: Xcode 8.2.1 Build version 8C1002

الشاشة الأولي

image1

الشاشة بعد تحديد عنصر إدخال المجال

image2

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

يجب أن تتناغم هنا ، mpaland صحيح. هناك العديد من الأخطاء البارزة (بعضها يستمر لمدة 4 أشهر ولا يزال مفتوحًا بدون رد!) والتي تتعلق بالوظائف الأساسية للتطبيق. انظر هنا على سبيل المثال:

  • # 9633
  • # 9518
  • # 9514
  • # 8607

يبدو أن هذه قد تُركت للتو لتتعفن ، بينما أضاف الفريق ميزات لطيفة باعتراف الجميع ، مثل الجزء المقسم مؤخرًا.

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

أحب كل العمل الشاق ، ولكن يبدو أن الأولويات خاطئة هنا.

يا رفاق ، فإن أفضل طريقة للحصول على الأشياء مرتبة حسب الأولوية وإصلاحها هي توفير _ كود قابل لإعادة الإنتاج_ يمكن لفريق Ionic اختباره والعثور على المشكلات. تعتبر لقطات الشاشة وصور gif ملحمية ، لكن أفضل طريقة هي استخدام الكود الذي يمكنهم استخدامه لمعرفة مشكلاتك. # 2 سنتات

لاحظ أنه مع النماذج والمدخلات ، لا تستخدم display: absolute لوضع الأشياء.

أنا أيضا لدي هذه القضايا. هذه ليست مشكلة تافهة. كيف كانت هذه مشكلة لمدة عام الآن مع عدم وجود حل على ما يبدو؟

أواجه مشكلة عندما يتم التركيز على حقل الإدخال ، ترتفع الشاشة وتنخفض في كل مرة أنقر فيها على الحقل. هل يمكن لأحد أن يساعدني ، من فضلك؟
teste

إصدار الإطار الأيوني: 2.3.0
إصدار أيوني CLI: 2.2.2
إصدار ليب التطبيق الأيوني: 2.2.1
إصدار البرامج النصية للتطبيق الأيوني: 1.1.4
إصدار iOS: 1.9.1
إصدار ios-sim: 5.0.4
نظام التشغيل: macOS Sierra
إصدار العقدة: v7.2.0
إصدار Xcode: Xcode 8.2.1 Build version 8C1002

pedrodurek سيكون رائعًا إذا قمت بتوفير الغطاس حتى يتمكن الرجال في الأيونية من التكاثر.

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

أولاً ، تأكد من حصولك على هذه المجموعة:

this.keyboard.disableScroll(false);
this.keyboard.hideKeyboardAccessoryBar(true);

بعد ذلك ، في app.module.ts الخاص بك ، ابحث عن ما يلي:

IonicModule.forRoot(YourApp)

واجعله مثل هذا:

IonicModule.forRoot(YourApp, {
      scrollAssist: false,
      autoFocusAssist: false
    }),

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

@ Tyler-Darby شكرًا لمشاركة الحل الذي قدمته ، إنه ليس الحل الأفضل ولكنه حل معقول ، وقد نجح معي.

كنت أواجه هذه المشكلة وكانت تدفعني إلى الجنون ، لكنني اكتشفت أخيرًا أن سبب ذلك هو تطبيق transform: translate3d(0,0,0) على العناصر لفرض تسريع الأجهزة. تبين أن ذلك يكسر تركيز الإدخال عندما تظهر لوحة المفاتيح.

أنا متأكد من أن هذا ليس سبب مشكلة الجميع ، لكن آمل أن يساعد شخصًا ما.

لدي العديد من المنصات وكنت أصلحها من خلال ..

أضع app.component.ts:

constructor(
                ...
                public config: Config,
        ) {
                // all platforms
        this.config.set( 'scrollPadding', false )
        this.config.set( 'scrollAssist', false )
        this.config.set( 'autoFocusAssist', false )
        // android
        this.config.set( 'android', 'scrollAssist', true )
        this.config.set( 'android', 'autoFocusAssist', 'delay' )
               ...

ربما سيكون مفيدًا لشخص ما.
شكرا يا رفاق على التلميحات ؛)

تحقق من الفيديو:
https://www.dropbox.com/s/6p49z0chle9g1b9/git-ios-input.mov؟dl=0

معلومات البيئة:
الحزم العالمية:

@ionic/cli-utils : 1.3.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.3.0

الحزم المحلية:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.3.0
@ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms               : ios 4.4.0
Ionic Framework                 : ionic-angular 3.3.0

نظام:

Node       : v7.10.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.2 Build version 8E2002 
ios-deploy : 1.9.0 
ios-sim    : 5.0.8

لقد استخدمت <input/> كـ <ion-input></ion-input>
جرب معها.

مرحبًا maulikakapure ،

لقد بدأت أول تطبيق أيوني لشركتي ولدي أيضًا مشكلة التمرير / التركيز مع لوحة المفاتيح. من الواضح أنك وجدت الحل الذي أظهرته في الفيديو الخاص بك. هل يمكنك تقديم شفرة المصدر؟ لم أجد بعد المجموعة الصحيحة من الحلول ومعلمات التكوين وعلامات html لاستخدامها.

شكرا

@ Tyler-Darby مرحبًا Tyler ، أين أضع الكود التالي؟

this.keyboard.disableScroll(false);
this.keyboard.hideKeyboardAccessoryBar(true);

مرحبًا cwiejack

يرجى التحقق من العرض التوضيحي البسيط هنا: https://www.dropbox.com/s/1o9hrnjgt7u3bpy/BasicDemo.zip؟

شكرا.

لإصلاح مشكلات الكلمات الرئيسية الافتراضية مع Ionic ، ما عليك سوى وضع ما يلي في الواردات من app.module.ts:

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

سيؤدي ذلك إلى إصلاح مشكلات لوحة المفاتيح على الفور.

aplimovil هذا حل المشكلة على تطبيق Android الخاص بي! هتاف كثير لك يا رجل طيب!

ما الهدف من وجود scrollAssist & autoFocusAssist إذا كان تعيينهم على true يجعل التطبيقات غير قابلة للاستخدام؟

هل هناك حالات يعطي فيها تمكينهم بعض المزايا؟

يبدو أن إصلاح aplimovil قد أصلح جميع المشكلات التي كنت أواجهها!

لذا ، نعم ، سأكون مهتمًا بالسبب الذي جعلك تضبط أيًا من هؤلاء على صواب.

JefferE لأن ميزات Ionic's scrollAssist و autoFocusAssist معطلة في نظام التشغيل iOS (في نظام Android تعمل تقريبًا بشكل جيد ، على الرغم من أن التحسينات تمر عملياً دون أن يلاحظها أحد على الأقل بالنسبة لي) ولا يبدو أنها لاحظت جميع تقارير المشكلات هنا بما يكفي حتى يتم إصلاحها في الإصدار القادم. نأمل أن يلاحظوا يومًا ما هذا الموضوع ويصلحون هذه الميزات إلى الأبد على نظام التشغيل iOS أو إيقاف تشغيلها بشكل افتراضي في الوقت الحالي في نظام التشغيل iOS.

عندما لا تعمل أيون textarea في الشبكة ، keyboard.disablescroll (false)؟ كيف تفعل مع هذه المشكلة

هذا عمل لي

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true,
            autoFocusAssist: false

    }),

المعلومات الأيونية:

CLI Packages:

@ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.1

System:

    Android SDK Tools : 25.2.5
    ios-deploy        : 1.9.1 
    ios-sim           : 5.0.8 
    Node              : v6.11.3
    npm               : 3.10.10 
    OS                : macOS Sierra
    Xcode             : Xcode 8.3.3 Build version 8E3004b 

أردت فقط إخباركم يا رفاق أن لدي مشكلة مماثلة في نظام التشغيل iOS وهي أن لوحة المفاتيح تنتقل فوق حقول الإدخال ولا يتم تحديث شاشة المحتوى لتوفير مساحة للوحة المفاتيح.

الشيء المهم الذي اكتشفته هو أنه عند استخدام المكونات الإضافية (مثل @ ionic-native / keyboard)
والقيام بأشياء على واجهتك في اللحظة التي تظهر فيها لوحة المفاتيح بـ this.keyboard.onKeyboardShow().subscribe(()=>{ this.someFlag=true}) وباستخدام العلم في الواجهة لتغيير شيء ما. لن يتغير ، سيكون عليك تشغيل اكتشاف التغيير الزاوي بنفسك عن طريق استيراد ChangeDetectorRef واستخدام وظيفته detectChanges() في subscribe .

لقد أنشأت هذا gitrepo لإظهار القضية. لا تتردد في إلقاء نظرة. كان هذا بمثابة فتاحة للعين بالنسبة لي لأنني لم أدرك أن هناك حالات تقوم فيها بـ subscribe(()=>{}) لشيء ما ، وتقوم بإجراء تغييرات ، لكن لن تظهر في الواجهة.

أصبح أكثر حكمة اليوم :)

آخر شيء: عطلة نهاية أسبوع رائعة للجميع!

إنه لأمر محير بالنسبة لي أن هذه المشكلة يزيد عمرها عن 1.5 عامًا ولم يتم اتخاذ أي إجراء. هذا يدمر تدفق تطبيقي تمامًا. إنها تجعلها تبدو عربات التي تجرها الدواب وذات جودة رديئة وعلينا أن نتسبب في الاختراق لجعل الأشياء تقترب من المظهر الجميل. mhartington هل هناك أي شيء يحدث داخليًا هنا؟

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

نفس الشيء بالنسبة لي. هذا لا يبدو جميلا على الاطلاق ..

مرحبًا بالجميع ، لقد أصبح هذا أولوية قصوى بالنسبة لنا ، راجع تغريدة https://twitter.com/adamdbradley/status/916295747968040960

توقع التحديثات في الأيام / الأسابيع القادمة

يبدو هذا جيدًا ، وآمل أن نعيد الحياة قريبًا دون تطبيق الاختراقات غير الضرورية.

بالنسبة للأشخاص الذين يستخدمون WK بالفعل ، أقوم بإعداد مكون إضافي جديد للوحة المفاتيح: cordova-plugin-ionic-wkkeyboard :

  1. قم أولاً بإلغاء تثبيت لوحة المفاتيح الأيونية
cordova plugin rm ionic-keyboard-plugin --save
  1. تثبيت البرنامج المساعد الجديد:
cordova plugin add cordova-plugin-ionic-wkkeyboard --save

سم مكعبhitendramalviya @ يونوت-movilammolhoek @ تايلر داربيyingbabymaulikakapureaplimovil

هناك مشكلة غريبة في لوحة wkkeyboard الجديدة هذه وتعطيل / تمكين أيون textarea مع FormGroups و FormControls. بعد إعادة تمكين النموذج الكامل تظل منطقة النسيج الأيوني معطلة. لا يحدث ذلك أثناء استخدام لوحة المفاتيح "القديمة".

سأقوم بإنشاء قضية الليلة :).

// يحرر:
ربما يتعلق الأمر بشيء آخر. نفس السلوك في المتصفح.
https://github.com/ionic-team/ionic/issues/13170

ما الذي يجب أن أبحث عنه إذا كانت لوحة المفاتيح لا تؤدي ببساطة إلى تغيير الحجم ناهيك عن التمرير للإدخال؟

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

واو 2018 ولا شيء.

لقد أعطوني هذا الحل ولكنه ليس مثاليًا تمامًا

.scroll-content {
الحشو السفلي: 0! مهم ؛
}

مرحبًا يا رفاق ، اكتشفت بالصدفة أن البنية الافتراضية بها _cordova-plugin-ionic-keyboard_. وعندما استبدلت ذلك بـ _ionic-plugin-keyboard_ ، اختفت أخطاء الإدخال.

لذا فإن الحل هو:
كوردوفا المساعد rm لوحة المفاتيح الأيونية
إضافة أيوني كوردوفا المساعد لوحة المفاتيح الأيونية
تثبيت npm - حفظ @ الأيونية الأصلية / لوحة المفاتيح

+1

فينديتال ، لقد حاولت ذلك ولكنه لم ينجح!

هل لديك هذا الخطأ المزعج مع شريط أدوات الرؤوس؟

الخميس، 29 مارس 2018 الساعة 11:31 مساء، ايمانويل Fache [email protected]
كتب:

فينديتال ، لقد حاولت ذلك ولكنه لم ينجح!

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/ionic-team/ionic/issues/6228#issuecomment-377362762 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/AYPMdggjRqZBZ0wghtxFjVbPLViBkR8hks5tjUSQgaJpZM4IKhUp
.

إذا كنت لا تزال تواجه هذه المشكلة ، فيرجى تجربة مكون لوحة المفاتيح الأيونية الأحدث

ionic cordova plugin rm  ionic-keyboard-plugin
ionic cordova plugin add cordova-plugin-ionic-keyboard

ثم اضبط

<preference name="KeyboardResizeMode" value="ionic" />

في ملف config.xml

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

كما نرى حدوث مشكلة التحويل. إنه أمر مزعج للغاية.
video-to-gif

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

هذا التعليق أعلاه AbrahamLopez10 علق في 1 أغسطس 2017 كان مناسبًا لي تمامًا ، حيث تم تمرير حقول الإدخال في العرض عند ظهور لوحة مفاتيح Android.

dylanvdmerwe، @ jgw96mhartington @ تايلر داربيmanucorporatadamdbradley

مرحبًا يا رفاق ، لقد قمت للتو بإنشاء توجيه مخصص للتعامل مع هذه المشكلة على أنظمة iOS و Android لتطبيقات Ionic 2 & 3. هل يمكنك التحقق مما إذا كان هذا يحل جميع المشكلات المتعلقة بمشكلة التمرير هذه.

لقد استخدمت التمرير إلى العرض إذا لزم الأمر ponyfill لعمل هذا التوجيه

قم بتثبيت توجيه أيون المدخلات التمرير في العرض الذي يقوم بتشغيل الأمر npm install ion-input-scroll-into-view

الخطوة 1
قم بإرفاق توجيه إدخال أيون التمرير في العرض بإدخال أيون أو منطقة النسيج الأيوني على النحو التالي.

<ion-input ion-input-scroll-into-view></ion-input>

<ion-textarea ion-input-scroll-into-view></ion-textarea>

الخطوة 2

يجب عليك استيراد IonInputScrollIntoViewModule في module.ts من المكون الرئيسي الخاص بك على النحو التالي

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ParentPage } from './parent';
import { IonInputScrollIntoViewModule } from 'ion-input-scroll-into-view';

@NgModule({
  declarations: [
    ParentPage
  ],
  imports: [
    IonicPageModule.forChild(ParentPage),
    IonInputScrollIntoViewModule
  ],
})
export class ParentPageModule {}

رابط npm: https://www.npmjs.com/package/ion-input-scroll-into-view
رابط جيثب: https://github.com/melwinVincent/ion-input-scroll-into-view

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

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

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

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات