Readonly Breaks Masking

[Patrick]

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":"[phone]","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":"[phone]","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.

 

 

 

 

 

 

 

[Patrick]

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="[phone]" })

 

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.

 

 

[Boyan Dimitrov]

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