Unplanned
Last Updated: 07 Jan 2021 19:46 by ADMIN
Created by: Jason
Comments: 0
Category: MaskedTextBox
Type: Feature Request
4
I would like to prevent the user from entering certain characters. At the moment, the closest feature is using validation to inform them of invalid input after the fact, but I'd like to prevent them from inputting it in the first place. Being able to define my own rules like in React (see the second example here) would be nice.
Completed
Last Updated: 05 Jan 2021 12:02 by ADMIN
Release 2.21.0

When the Label parameter of the TelerikMaskedTextBox is not defined, the Width is applied to the input of the component. However, it should be applied to the span holding the component.

====================================

ADMIN EDIT

A couple of workarounds:

  • You can define the Label parameter of the TelerikMaskedTextBox. In this case, you will not be facing the mentioned bug and also will not have to separately define a label tag
  • You can set the Bootstrap class "form-control" to the TelerikMaskedTextBox through its Class parameter and remove the Width parameter.

=====================================

Unplanned
Last Updated: 21 Dec 2020 14:44 by ADMIN

My users use Tab to focus the masked textbox and when they start typing (its content was highlighted because of getting focus with Tab), that typing action does not put the range (caret) in the correct place - it remains at position 0 rather than going to position 1.

For example, in the below phone mask they type "9" and then "0" and I would expect to get "90" but I get "0".

---

ADMIN EDIT

A workaround is to collapse the range when the input gets focus:

@inject IJSRuntime JsInterop

<input />
<span @onfocusin="@CollapseInputSelection" @ref="@ParentElem">
    <TelerikMaskedTextBox Mask="+1 (000) 000-0000"
                          IncludeLiterals="true"
                          @bind-Value="@CellPhoneNumber"
                          Class="form-control" />
</span>

@* move this script to an actual script file instead of using this hack *@
<script suppress-error="BL9992">
    function collapseInputSelection(root) {
        setTimeout(function () {
            var input = root.querySelector("input");
            if (input) {
                input.setSelectionRange(0, 0);
            }
        }, 20);
    }
</script>

@code{
    string CellPhoneNumber { get; set; }

    ElementReference ParentElem { get; set; }
    async Task CollapseInputSelection()
    {
        await JsInterop.InvokeVoidAsync("collapseInputSelection", ParentElem);
    }
}

---