1
0
-1

I have a maestro form that I'm developing for exclusive use on iPads, and I have several fields that I want to open with the numeric keyboard. They aren't number exclusive fields (date, time, etc), so I can't use the numeric option to switch it as I need to enter other characters.


I found some code on stack overflow: https://stackoverflow.com/questions/19684855/force-ios-numeric-keyboard-with-custom-currency-pattern


$('input[type="text"]').on('touchstart', function() {
  $(this).attr('type', 'number');
});

$('input[type="text"]').on('keydown blur', function() {
  $(this).attr('type', 'text');
});

Is there a way to get this sort of thing working in Maestro? I placed this code on the "Focus" rule, but no dice.


Thanks!

-----------------------------------------

Edit:

I've noticed that it does kick in eventually, but usually on the other fields later on.

    CommentAdd your comment...

    3 answers

    1.  
      1
      0
      -1

      Bill Frost I'm trying to use the specific date field option you mentioned: 

      $('#datePicker').attr('type','tel');

      But it's not working for me. I've tried replacing '#datePicker' with ''#data.dateOfBirth' and 'data.dateOfBirth', but neither option work. It is stuck withe the regular keyboard in iOS devices.

      1. Bill Frost

        Hi,

        My example uses a JQuery id selector for an element with an id of 'datePicker', so it will match the form field 'Date Picker'. (my Maestro 5.1.4.5 version might be newer than yours, so your id may be in a different area).

        That will match up with the element in the rendered form:

        You will need to match up with what you have named your field.

        If you use the F12 developer tools in Chrome, make sure you are looking at the <input> element to get the right id.

      2. Stephen Smith

        So I shouldn't use the usual option of double clicking the element in the script window, which produces 'data.dateOfBirth', and instead just put in 'dateOfBirth', so the line should be like the following: 

        $('#dateOfBirth').attr('type','tel');


        As an example?

        Thanks again 

      3. Bill Frost

        Correct, double-clicking the elements are mostly there to help with accessing the underlying data object, whereas JQuery selectors need to be hand-crafted, although in most cases you can double-click for convenience then remove the data. prefix.


      CommentAdd your comment...
    2.  
      1
      0
      -1

      Can you apply your code to page load rule or other events triggered earlier?

        CommentAdd your comment...
      1.  
        1
        0
        -1

        Hi Stephen,

        The number keypad should come up on an iPad if you make the Text Field type Telephone.

        1. Stephen Smith

          That option works for the time field, thank you, but you can't select an input type on a date field, so I need a way to default date fields to the numeric keyboard too.

        2. Bill Frost

          You can add this code to a Page Load rule to change an individual field:

              $('#datePicker').attr('type','tel');

              (Change 'datePicker' to the ID of your date picker field)

          If you have more than one date field, you can hit all of them with this:

              $('.date-input').attr('type','tel');

          Just make sure to put your code on a Page Load rule of each page you have Date Picker fields on, because all components on a page are rebuilt in the DOM every time you navigate between pages.

        3. Stephen Smith

          Great thanks, if there's no bugs with this it may be worthwhile putting into our template in some way


        4. Stephen Smith

          Just another question, have you tested this across other devices, android phones and tablets, etc? 

        5. Bill Frost

          I did limited testing on iPad, and Android phone, both of which worked OK.

          On iPhone 6, you only get to pick phone-related characters like 0-9, #, *, but no dot or slash.

        6. Stephen Smith

          So that could likely be due to using the type tel option? Is there an option for the regular numeric keyboard?

        7. Stephen Smith

          I just tried the "number" option and it works on iPhone. Is there a reason that you didn't use this option? "tel" seems like it would be more of a problem at times, as it is in this instance.

        8. Bill Frost

          The number type isn't compatible with the date picker.  It will bring up the keyboard OK, but if you select a date from the calendar, it will not show it in the text field because it contains non-numeric characters.

          You might need to look at different techniques for the various types of input fields you have.

        9. Stephen Smith

          That sounds like yet another product bug to me. Keyboard choice in mobile devices really shouldn't affect the date picker. The numeric keyboard doesn't just have numeric keys in it, nor does the date format. Add on to that that the code to switch on particular keyboards shouldn't be affecting the data entered into the field, no matter the way you input it. 

          Thank you for your assistance though. I've got some ideas to get things working.  Avoka definitely should consider building this functionality into the product, or at least test things out to ensure bugs don't get through.

        CommentAdd your comment...