Select the Focused NumericTextBox Text
Environment
| Product | Progress® Kendo UI® NumericTextBox for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I select the whole input value when on focus in the Kendo UI for jQuery NumericTextBox?
Solution
As of the 2020 R3 release, selecting the whole NumericTextBox input value on
focusis available out of the box. For more information, refer to theselectOnFocusproperty.
The following example demonstrates how to achieve the desired scenario.
<input id="numeric" type="number" value="17" min="0" max="100" step="1" />
<script type="text/javascript">
$(function () {
$("input").kendoNumericTextBox();
//wire focus of all numerictextbox widgets on the page
$("input[type=text]").on("focus", function () {
var input = $(this);
clearTimeout(input.data("selectTimeId")); //stop started time out if any
var selectTimeId = setTimeout(function() {
input.select();
// To make this work on iOS, too, replace the above line with the following one. Discussed in https://stackoverflow.com/q/3272089
// input[0].setSelectionRange(0, 9999);
});
input.data("selectTimeId", selectTimeId);
}).blur(function(e) {
clearTimeout($(this).data("selectTimeId")); //stop started timeout
});
})
</script>