I am using KendoUI components to write a mobile friendly website. I've come across my first issue with the KendoUI controls. I have an Input DOM element as below:
<
input
type
=
"number"
id
=
"myNumberInput"
min
=
"1"
max
=
"10"
/>
and the javascript behind this is as follows:
var
inputDOM = $(
"#myNumberInput"
);
inputDOM.kendoNumericTextBox({format:
"#"
});
after the kendo control has been created, both the new input tag created by kendo and the old ones have both had their "type" properties set to "text" instead of "number". This has now completely removed the benefits on a phone where a context specific (i.e a number pad) is displayed when a "number" type input is selected.
Is there any way I can change the type property back to "number", or is there anything i'm missing?.
I can change the type of the original input object by just doing the below after the kendo control is made
inputDOM.prop(
"type"
,
"number"
);
but this doesn't help the actual control now visible to the user. I've also tried the wrapper and element properties on the numericTextBox object as below
inputDOM.data(
"kendoNumericTextBox"
).element.prop(
"type"
,
"number"
); inputDOM.data(
"kendoNumericTextBox"
).wrapper.prop(
"type"
,
"number"
);
but this did not seem to change the property of the visible control, the "element" only changed the value of the original now hidden Input element.
Any ideas where i've gone wrong, or how I can achieve this?