This is a migrated thread and some comments may be shown as answers.

Readonly Breaks Masking

2 Answers 50 Views
MaskedTextBox
This is a migrated thread and some comments may be shown as answers.
Patrick
Top achievements
Rank 1
Patrick asked on 31 Oct 2019, 05:43 PM

This occurs even in the masked textbox API demo.

 

On Page load the markup looks like this:

<span class="k-widget k-maskedtextbox" style="width: 100%;">
 <input id="maskedtextbox" name="maskedtextbox" style="width: 100%" data-role="maskedtextbox" class="k-textbox" autocomplete="off"><span class="k-icon k-i-warning">
</span>
</span>
<script>kendo.syncReady(function(){jQuery("#maskedtextbox").kendoMaskedTextBox({"mask":"(999) 000-0000","rules":{}});});</script>

 

The mask works.

If you click the Readonly button the markup changes to this:

<span class="k-widget k-maskedtextbox" style="width: 100%;">
<input id="maskedtextbox" name="maskedtextbox" style="width: 100%" data-role="maskedtextbox" class="k-textbox" autocomplete="off" readonly="readonly">
<span class="k-icon k-i-warning"></span></span>
<script>kendo.syncReady(function(){jQuery("#maskedtextbox").kendoMaskedTextBox({"mask":"(999) 000-0000","rules":{}});});</script>

 

The only apparent difference is the addition of the readonly attribute.

 

If I remove the readonly attribute.  I can type in the textbox again, but it doesn't follow the mask.

 

 

 

 

 

 

 

2 Answers, 1 is accepted

Sort by
0
Patrick
Top achievements
Rank 1
answered on 31 Oct 2019, 06:36 PM

So in my specific circumstance I have several sub forms in a primary form. And each form has its own edit/cancel/save button.  When the edit is pressed it opens up the form and allows for modification while hiding the edit button(s) for that form and also showing the cancel and save buttons.

I found a workaround... Best i could do under the circumstances.  Wondering if this is suggested?

Instead of using the helper for mvc i created a normal textbox and gave it a custom mask property property.

@Html.TextBoxFor(model => model.PHONE, new { @class = "pv-width-150 pv-form-control", @readonly = "readonly" , @mask="(999) 000-0000" })

 

When the edit button is pressed remove the readonly attribute from all the text boxes in the form, and apply the mask for all the textboxes in the form:

$(e.target).closest(".pv-panel").find("[readonly='readonly']").removeAttr("readonly");
$(e.target).closest(".pv-panel").("input[mask]").each(function (index) {
    $(this).kendoMaskedTextBox({
        mask: $(this).attr("mask")
    })
});

 

I then created a document ready script as such:

$(document).ready(function () {
    $("input[mask]").each(function (index) {
        $(this).kendoMaskedTextBox({
            mask: $(this).attr("mask")
        })
    });
})

 

Working so far... but i would assume that this would be functionality that would be built in to the helper when using the masked textbox.

 

 

0
Boyan Dimitrov
Telerik team
answered on 04 Nov 2019, 12:22 PM

Hello,

As far as I understand the problem here is that after calling the readonly method of the MaskedTextBox you want to remove the "readonly" functionality so user is able to type again following the mask. Just removing the readonly attribute from the input element will not resolve this issue. I would suggest just to call the enable method and it should make the MaskedText editable again and the mask will work as expected. There is no need to manipulate the input element readonly attribute at all. The enable method will do that, but also it will keep the mask. 

Regards,
Boyan Dimitrov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
MaskedTextBox
Asked by
Patrick
Top achievements
Rank 1
Answers by
Patrick
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or