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 focus is available out of the box. For more information, refer to the selectOnFocus property.

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>

See Also

• NumericTextBox JavaScript API Reference
• Change Text Color
• Persist Old Value
• Use Custom Culture Script