This is a migrated thread and some comments may be shown as answers.

Numeric Keyboard on iPhone?

9 Answers 373 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Johann
Top achievements
Rank 1
Johann asked on 04 Mar 2016, 08:00 PM

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

9 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 08 Mar 2016, 10:49 AM
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!
 
0
Johann
Top achievements
Rank 1
answered on 14 Mar 2016, 02:35 PM

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

0
Georgi Krustev
Telerik team
answered on 16 Mar 2016, 10:25 AM
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!
 
0
Ian
Top achievements
Rank 1
answered on 22 Jul 2016, 04:21 PM
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?
0
Georgi Krustev
Telerik team
answered on 26 Jul 2016, 09:05 AM
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.
 
0
Joe
Top achievements
Rank 2
answered on 11 Apr 2019, 02:46 PM

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

0
Tsvetomir
Telerik team
answered on 15 Apr 2019, 10:11 AM
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.
0
Joe
Top achievements
Rank 2
answered on 15 Apr 2019, 03:55 PM

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

0
Tsvetomir
Telerik team
answered on 17 Apr 2019, 08:36 AM
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.
Tags
NumericTextBox
Asked by
Johann
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Johann
Top achievements
Rank 1
Ian
Top achievements
Rank 1
Joe
Top achievements
Rank 2
Tsvetomir
Telerik team
Share this question
or