Numeric Keyboard on iPhone?

[Johann]

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

[Georgi Krustev]

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:

• http://docs.telerik.com/kendo-ui/controls/editors/numerictextbox/overview#input-type

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

 

 

[Johann]

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

[Georgi Krustev]

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:

• http://dojo.telerik.com/IjoMu

<script>
    $(function() {
      $("#numeric").kendoNumericTextBox();
      $("#numeric").attr("type", "number");
    });
  </script>

Regards,
Georgi Krustev
Telerik

 

 

[Ian]

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?

[Georgi Krustev]

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

 

 

[Joe]

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

[Tsvetomir]

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

[Joe]

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 :-)

[Tsvetomir]

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