iPhone UiWebView: كيفية إجبار لوحة مفاتيح رقمية؟ هل هو ممكن؟

StackOverflow https://stackoverflow.com/questions/773843

سؤال

أقوم بتجربة phonegap لتطوير بعض تطبيقات iPhone. PhoneGAP يلف بشكل أساسي uiWebView - إنه يعمل بشكل جيد. المشكلة هي أن التطبيق الخاص بي يحتوي على العديد من حقول الإدخال التي تأخذ مدخلات رقمية فقط. أحتاج حقا إلى إجبار لوحة المفاتيح الرقمية بدلا من قبول لوحة المفاتيح القياسية الافتراضية، والتي تقوم بعد ذلك بفتح المستخدم على التبديل إلى الرقمية في كل حقل. هل يعرف أحد إن كان هذا ممكنا؟ كيف؟

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

التحديث 6 نوفمبر 2009 - كما هو مذكور أدناه، تم تحديث Apple وظائف Safari مؤخرا بحيث يكون هذا، مرة أخرى، مدعومة. لذلك تم تغيير الإجابة المقبولة لتعكس ذلك.

 <html>
<input type='tel'/>
<input type='number'/>
<input type='email'/>
<input />
</html>
هل كانت مفيدة؟

المحلول

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

لذلك على سبيل المثال، يمكنك القيام بذلك:

<input type="number" />

وعندما يركز مربع الإدخال، يتم عرض لوحة مفاتيح الرقم (كما لو كان لدى المستخدم لوحة المفاتيح الكاملة واضغط على زر "123".

إذا كنت تريد حقا أرقام فقط، يمكنك تحديد:

<input type="tel" />

ثم سيحصل المستخدم على لوحة المفاتيح رقم الهاتف.

أعرف أن هذا يعمل مع Safari المحمول - أفترض أنه سيعمل مع UiWebView.

نصائح أخرى

لقد وجدت حلا أفضل هو استخدامه <input type="text" pattern="[0-9]*"> عند تصميم النماذج لكل من متصفحات الهاتف المحمول وسطح المكتب.

من وثائق أبل (ملاحظة حول UIWebView):

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

تم فحصه على iPhone OS 3.0، كانت هذه الوظيفة لا تزال موجودة، لست متأكدا من سبب إزالة Apple هذه الوظيفة المفيدة للتو، منزعج حقا للعمل في هذا الحق الآن :(

فيما يلي قائمة من كل نوع متوافق مع آيوهات الويب (4.0 وأكثر) المشاهدات على الويب:

http://conecode.com/news/2012/12/mobile-safari-uiwebview-input-types/

كان هذا ممكنا في التكرار الأول ل iPhone OS - Safari سيعطي لوحات مفاتيح رقمية لتكوين حقول مع "ZIP" أو "الهاتف" بأسمائها - ولكن اختفت في iPhone OS 2.0.

ليس لدى PhoneGap وظيفة API لتجاوز هذا في الوقت الحالي. قد يكون الأمر شيئا يعمل عليه، كما أنه سيكون بالتأكيد ميزة Nifty.

يدعم Safari iOS المحمول أيضا:

<input type="password" />

تحتاج إلى إجراء التغيير في جزء HTML لمشروع Dashcode الخاص بك:

  1. في DashCode فتح Index.html في إطار التعليمات البرمجية.
  2. على قماش الرأي الذي تعمل عليه، حدد حقل الإدخال الذي تريد تعيينه لاستخدام لوحة المفاتيح المحسنة.
  3. انقر فوق index.html لإعطائها التركيز.
  4. حدد تحرير> ابحث عن شريط قوائم DashCode.
  5. اكتب في المربع البحث الاسم الدقيق الذي قدمته لعنصر تحكم حقل النص. العثور على تحديد موقع عنصر التحكم في ملف index.html.
  6. تغيير النوع من type="text" ل type="number".

منجز.

ما يمكنك أيضا استخدامه في IOS PhoneGap القائم على التطبيق هو: 

input type="number" pattern="[0-9]*"

يظهر في الصورة أدناه. يعمل بشكل جميل مع iOS 8.2 و phonegap 3.5 وما فوق.

iOS لديه لوحة مفاتيح رقمية UIKeyboardTypeNumbersAndPunctuation, ، ولكن هذا لا يمكن أن يسمى من HTML (https:veloper.apple.com/library/ios/documentation/stringstextfonts/conectual/textandwebiphoneos/keyboardmanagement/keeboardmanagement.html.)

نظرا لأن لوحة المفاتيح "Tel"، فإن علامات الترقيم مفقودة عليك إنشاء هذا بنفسك. نظرا لأن لوحات المفاتيح المخصصة IOS8 متوفرة. أو إذا كنت بحاجة فقط إلى علامات الترقيم، فيمكنك إضافة زر (كيفية إضافة زر "القيام به" إلى لوحة المفاتيح NUMPAD في iOS) إلى لوحة المفاتيح الرقمية التي تنبثق عند تحديد حقل الإدخال الخاص بك مع type="number" pattern="[0-9]*" .

للقيام بذلك: رمز الهدف - C.

-(void)keyboardWillHide:(NSNotification *)note
{
    [self.donekeyBoardBtn removeFromSuperview];
    [self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat: @"document.activeElement.blur()"]];
}

- (void)keyboardWillShow:(NSNotification *)note
{
    [UIView setAnimationsEnabled:NO];
    // create custom button
    //UIKeyboardTypeNumberPadin
    //type="number" pattern="[0-9]*"
    UIButton *extryB= [UIButton buttonWithType:UIButtonTypeRoundedRect];
    extryB.frame = CGRectMake(0, self.view.frame.size.height+150, 100, 50);
    extryB.backgroundColor = [UIColor colorWithRed:204.0f/255.0f
                                             green:210.0f/255.0f
                                              blue:217.0f/255.0f
                                             alpha:1.0f];
    extryB.adjustsImageWhenHighlighted = NO;
    extryB.titleLabel.font = [UIFont systemFontOfSize:14.0];
    [extryB setTitle:@"," forState:UIControlStateNormal];
    [extryB setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [extryB addTarget:self action:@selector(extryBpressed) forControlEvents:UIControlEventTouchUpInside];



self.donekeyBoardBtn = extryB;

// locate keyboard view
UIWindow* tempWindow = [[[UIApplication sharedApplication] windows] objectAtIndex:1];
UIView* keyboard;
for(int i=0; i<[tempWindow.subviews count]; i++)
{
    keyboard = [tempWindow.subviews objectAtIndex:i];
    // keyboard view found; add the custom button to it

    if([[keyboard description] hasPrefix:@"<UIInputSetContainerView"] == YES)
    {

        for(int i = 0 ; i < [keyboard.subviews count] ; i++)
        {
            UIView* hostkeyboard = [keyboard.subviews objectAtIndex:i];

            if([[hostkeyboard description] hasPrefix:@"<UIInputSetHost"] == YES)
            {
                UIButton* donebtn = (UIButton*)[hostkeyboard viewWithTag:67123];
                if (donebtn == nil){
                    //to avoid adding again and again as per my requirement (previous and next button on keyboard)

                    if([[self printKeyboardType] isEqualToString: @"UIKeyboardTypePhonePad"]){
                        [keyboard addSubview:extryB];
                    }

                }
            }
        }
    }
    //[keyboard addSubview:extryB];
}
[UIView setAnimationsEnabled:YES];
// animate
[UIView animateWithDuration:0.5 animations:^{
    extryB.frame = CGRectMake(0, self.view.frame.size.height-50, 100, 50);
}];
}

-(NSString*)printKeyboardType
{

NSString* strKeyboardType = @"";
switch (self.textDocumentProxy.keyboardType) {
    case UIKeyboardTypeAlphabet:
        strKeyboardType = @"UIKeyboardTypeAlphabet";
        break;
    case UIKeyboardTypeDecimalPad:
        strKeyboardType = @"UIKeyboardTypeAlphabet";
        break;
    case UIKeyboardTypeDefault:
        strKeyboardType = @"UIKeyboardTypeDefault";
        break;
    case UIKeyboardTypeEmailAddress:
        strKeyboardType = @"UIKeyboardTypeEmailAddress";
        break;
    case UIKeyboardTypeTwitter:
        strKeyboardType = @"UIKeyboardTypeTwitter";
        break;
    case UIKeyboardTypeNamePhonePad:
        strKeyboardType = @"UIKeyboardTypeNamePhonePad";
        break;
    case UIKeyboardTypeNumberPad:
        strKeyboardType = @"UIKeyboardTypeNumberPad";
        break;
    case UIKeyboardTypeNumbersAndPunctuation:
        strKeyboardType = @"UIKeyboardTypeNumbersAndPunctuation";
        break;
    case UIKeyboardTypePhonePad:
        strKeyboardType = @"UIKeyboardTypePhonePad";
        break;
    case UIKeyboardTypeURL:
        strKeyboardType = @"UIKeyboardTypeURL";
        break;
    case UIKeyboardTypeWebSearch:
        strKeyboardType = @"UIKeyboardTypeWebSearch";
        break;
    default:
        strKeyboardType = @"UNKNOWN";
        break;
}
NSLog(@"self.textDocumentProxy.keyboardType=%@", strKeyboardType);
return strKeyboardType;
}

#define SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(v)  ([[[UIDevice currentDevice] systemVersion] compare:v options:NSNumericSearch] != NSOrderedAscending)

- (void)extryBpressed{
    //simulates a "." press
    [self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat: @"simulateKeyPress('.');"]];
}

ثم يجب عليك إضافة الطريقة التي يمكن الوصول إليها على نطاق واسع في رمز JS الخاص بك.

simulateKeyPress: function(k) {
        var press = jQuery.Event("keypress");

        press.which = k;
        // place the id of your most outer html tag here
        $("#body").trigger(press);
            // just needed because my active element has a child element where the value should be placed in
                var id = document.activeElement.id.indexOf("-");
                if(id != -1){
                    var currentTf = sap.ui.getCore().byId(document.activeElement.id.split("-")[0]);
                    //append the value and set it (my textfield has a method setValue())
                    var currentTfValue = currentTf.getValue();
                    currentTf.setValue(currentTfValue + k);
                }
            },
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top