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

      Unknown User (bfrost) 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. Unknown User (bfrost)

        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. Unknown User (bfrost)

        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.


      4. Charity Hibberd

        I am trying to implement something similar, however the element I want to change in inside a repeat block. This is changing the element id. Could you assist me in determining the correct id to use? The id on the form is amount_1 but the input has a "placeholder id" but I can't seem to access that either. 

        I have tried all these variations to no avail. 

        $('input.input-group[type="text"]').attr('type','tel');
        $('input.input-group').attr('type','tel');
        $('.input-group').attr('type','tel');
        $('input.id-amount_1').attr('type','tel');
        $('.id-amount_1').attr('type','tel');
        $('#amount_1').attr('type','tel');
        $('#amount_1-i0').attr('type','tel');


        Can anyone assist me? 

        Thanks, Charity

      5. Unknown User (bfrost)

        Hi Charity,

        Repeat items are added dynamically, so if your code is in a form load rule, it would only find the original repeat occurrence. Newly added occurrences would not be caught since the form load rule fires only once.

        You need to change the original occurrence first, then monitor the DOM for newly added elements.  You can do this in a form load rule by using a MutationObserver like:

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

          var observer = new MutationObserver(function(mutations) {
              mutations.forEach(function(mutation) {
                $(mutation.addedNodes).find('.id-amount input').attr('type','tel');
              });
            });
          observer.observe($('.id-repeatingBlockTemplate')[0], { childList: true, subtree: true });

        The selector in find('.id-amount input') selects input elements that are descendants of elements with class 'id-amount'.

        As always, JQuery like this should be used only as a last resort, and you always need to be mindful of cross-browser and accessibility support.

      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. Unknown User (bfrost)

          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. Unknown User (bfrost)

          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. Unknown User (bfrost)

          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...