Numeric Keyboard on iPhone?

10 posts, 0 answers
  1. Johann
    Johann avatar
    28 posts
    Member since:
    Jun 2015

    Posted 04 Mar 2016 Link to this post

    Hi,

    I use the numericTextBox in our Cordova/AngularJS application. If I focus the numericTextBox it opens the normal alpha-numeric keyboard and not the numeric keyboard like expected.

    Is it possible to make that the numeric keyboard appears on focus?

    With best regards

    Johann

  2.
  3. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3748 posts

    Posted 08 Mar 2016 Link to this post

    Hello Johann,

    The widget changes the type of the input to "text" in order to support decimal separators different than ".". You can find more details here: If changing the type is not an option for you, then you can add pattern attribute to the input element. Thus the iOS Safari will open a relevant virtual keyboard layout to the defined pattern value.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Johann
    Johann avatar
    28 posts
    Member since:
    Jun 2015

    Posted 14 Mar 2016 in reply to Georgi Krustev Link to this post

    Hi,

    I've tried the numericTextBox now with a numeric "pattern" but I still get no numeric Keyboard on iOS or Windows Phone.

    With best regards,

    Johann

  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3748 posts

    Posted 16 Mar 2016 Link to this post

    Hello Johann,

    Indeed, it seems that the pattern attribute is no longer supported in latest iOS. The only solution in this case is to change the type of the input element:
    <script>
        $(function() {
          $("#numeric").kendoNumericTextBox();
          $("#numeric").attr("type", "number");
        });
      </script>

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
  9. Grant
    Grant avatar
    12 posts
    Member since:
    Aug 2011

    Posted 22 Jul 2016 in reply to Georgi Krustev Link to this post

    I have the same question but for a kendoGrid. Is it possible to force the browser to open a number keypad for a field in the grid?
  11. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3748 posts

    Posted 26 Jul 2016 Link to this post

    Hello Grant,

    The mobile browsers would decide what virtual keyboard to open based on the input type:

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type

    If you would like to display "number" keypad, then you will need to change the type of the input to "number", as it is shown in the previous reply.

    Regards,
    Georgi Krustev
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  13. Joe
    Joe avatar
    69 posts
    Member since:
    Dec 2007

    Posted 11 Apr in reply to Georgi Krustev Link to this post

    Hi Georgi,

    How can this be done with the MVC wrapper?

    Doing something like this doesn't work. It always displays type="text"

        @Html.Kendo().NumericTextBox().HtmlAttributes(new { type = "number" })
    or
        @Html.Kendo().NumericTextBox().HtmlAttributes(new { @type = "number" })

     

    Thanks

  14.
  15. Tsvetomir
    Admin
    Tsvetomir avatar
    235 posts

    Posted 15 Apr Link to this post

    Hi Joe,

    The Kendo UI NumericTextBox renders two inputs - one of them is hidden. By default to each of them the type attribute is set to "text". This is due to the fact that the widget supports a vast majority of the internationalized numbers. Furthermore, when the type is set to "number", a basic validation will be applied from the browser. 

    The widget would always ignore the HtmlAttributes setting and would set it to "text". This is why, if you would like to alternate it, you should do so after its initialization. For instance, document ready event would be a perfect fit:

    @(Html.Kendo().NumericTextBox<double>()
          .Name("numeric")
          .Value(17)
          .HtmlAttributes(new { style = "width: 100%", title = "numeric" })
    )

    $(function(){
        $("#numeric").attr("type", "number");
    })

    Have in mind that alternating the type of the widget might severely impact the current behavior of the widget. Issues with the validations might occur since the browser would set its own validation rules. 

    As an alternative to this would be to create a plain input, set its type to "number" and decorate it with the "k-textbox" class. This would give it the look of the Kendo UI NumericTextBox.

    In case any questions arise, let me know.


    Kind regards,
    Tsvetomir
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  17. Joe
    Joe avatar
    69 posts
    Member since:
    Dec 2007

    Posted 15 Apr in reply to Tsvetomir Link to this post

    Thanks for the info Tsvetomir. 

    I think in the future it would be great for NumericTextBox to automatically handle keyboards on Mobile. One less thing for us devs to worry about :-)

  19. Tsvetomir
    Admin
    Tsvetomir avatar
    235 posts

    Posted 17 Apr Link to this post

    Hi Joe,

    The idea of setting the attribute of interest to be of type "number" has already been discussed and researched. Unfortunately, doing so would lead to a breaking change in the current behavior and more importantly, it would cut a lot of the rich functionality that the widget exposes. It basically is designed in such a way that the user can type in anything and afterwards a validation is imposed. More information on the discussion can be found in the following GitHub issue:

    https://github.com/telerik/kendo-ui-core/issues/806

    I hope that you find those additional details helpful.


    Kind regards,
    Tsvetomir
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  20.
Back to Top