Select All Text on Focus
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 theselectOnFocus
property.
The following example demonstrates how to select the whole NumericTextBox input value on focus
.
<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
- How to Change Text Color
- How to Persist Old Value
- How to Use Custom Culture Script
For more runnable examples on the Kendo UI NumericTextBox, browse its How To documentation folder.