Hi,

we can't use the MaskedTextBox in our MVVM project because there's a bug when masking with only digits & spaces (for example the simple mask "999"). The mask won't work because a function from Kendo UI seems to expect a thousand or decimal placeholder. This can be easily reconstructed in the MVVM demo for the MaskedTextBox:

http://dojo.telerik.com/exIYe

I just changed the mask to "999" and it is not working any longer. As far as I can tell, no combination without a decimal or thousand placesholder seems to work. Except "000" for example also seems fine, but the number shown is not masked the right way.

Could you please look into this?

Regards,

Steve.

Nothing crazy going on there. It works as designed, i.e. when typing in numbers or pasting a phone number or filling the field with jQuery, it will remove non-numeric characters and format it with the hyphens.

The problem I'm running into is with a tool called Dashlane, which is a password/autofill utility. When I choose a phone number that was saved in Dashlane to populate my phone field, Dashlane has the number saved as "1234567890" and that is what gets put into the masked textbox.

The Kendo mask does not seem to account for this type of input. I'm guessing the Dashlane extension is manually setting the `value` property of the DOM element, which is not triggering a keyboard event or something. I think it is triggering the `onchange` event, though. Seems like the Kendo mask may need to watch for value changes as well. After DL updates the value, the field doesn't mask it and the mask is just straight-up broken after that.

Has this ever been brought up before? Has anyone else encountered this problem? Is there anything I can do to make sure the mask doesn't get broken using Dashlane's autofill?

Hello

I wanted to let you know that you can "cheat" masked textbox. I created a masked textbox allowing hours, minutes and seconds in format: hh:mm:ss while "mm" and "ss" cannot be higher than 59 as it makes sense:

$("#eventobjecttime").kendoMaskedTextBox({
mask: "00:~0:~0",
value: "00:00:00",
rules: {
"~": /[0-5]/,
}
});

That works fine but if I enter f.e. "05:47:58" (what is fine and allowed by set rule), set the cursor behind the "05" (hours) and press DEL left key (as I want to delete the "5" the part right (mm:ss) shifts to left. You now see: 04:75:8_ Ooops! I can jump out of the textbox and nothing is complaining. The other way around (f.e. pasting something in between) is possible to. So the masked textbox does not guarantee the user can not override the rules.

Do you have any idea how I can make sure the masked textbox can not be overridden?

We are using the masked text box along with a phone number validator in asp.net mvc. We are running into an issue with the phone number autocomplete in chrome where if there is a phone number already stored in the autocomplete it disables the mask resulting in a condition like the attached screenshot. Where the user is unable to fix the phone number. The field name is "Phone". Do you have any suggestions or workarounds for this issue?

Hello there

Maybe this is a known problem, I couldn't find this case in the Internet / forum here. I want to bind a MaskedTextBox Widget to a HTML element: 

<input id="numbertest" value="555" class="numericBox" />

The id element "numbertest" is not available after loading the page. Thats why I added a class to the id element so it will be affected as soon as it is created. The id element is part of a Kendo UI template. In the ready function I added therefore:

$(".numericBox").kendoMaskedTextBox({
mask: "000"
});

And of course I need a valid class in the header:

.numericBox {
font-size: 20px;
}

Now the weird behaviour: The font size inside the element numbertest is set to 20 when the template is created but its not a MaskedTextBox (I can enter anything). To be sure its not only a MaskedTextBox problem I also tried to attach a NumericTextBox but that also wont work. Thats why I think its a general problem. I can only make it work when creating the numbertest element before the ready function is called. Then I'm able to bind the element numbertest to a MaskedTextBox by classname (and of course directly by accessing it by $("#numericBox"). ...

 So my question: Is there a way to attach a Widget to a html element even if its not created after page is loaded (but later on by f.e. a Kendo UI template)?

Regards

Steps to reproduce (demo):

1. Define the mask in markup. Example:
   <input id="someNumber" value="003123456" data-role="maskedtextbox" data-mask="0000000000" />
2. Initialize using kendo.init()

Expected results:

Textbox shows prompt chars on focus, only allows characters defined in mask, etc.

Actual results:

Textobx does not show prompt chars on focus (or shows "undefined" if data-clear-prompt-char is set to true), allows any characters.

Other info:

The issue does not happen if a) there is a literal in the mask, or b) the component is initialized through JS, such as $(selector).kendoMaskedTextBox(options).

It seems that the default behavior of the control is to set autocomplete="off" which is fine except Chrome does not like to adhere to this standard.

 Developers should be allowed to override the this default behavior if need be to set the autocomplete type of the textbox, however, setting this via the htmlattributes does not do anything.

Example using the MVC Wrappers:

html.Kendo().MaskedTextBoxFor(e).Mask(mask).HtmlAttributes(new { @class = "form-control", autocomplete = "tel-national" })

This pops up over the text box, because we are in a model popup.

<div class="form-group">
    <label class="col col-md-5">Enter part of Customer number</label>
    <div class="col col-md-7">
        <input name="number"
               kendo-masked-text-box
               pattern=".{0}|.{3,}"
               type="text"
               ng-model="filterData.number"
               data-pattern-msg="{{resources.validation.minLength3}}"
               data-required-msg="{{resources.validation.required}}"
               ng-required="!filterData.name">
    </div>
</div>

​

Here the inspected source.

 <span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" data-for="number" role="alert"><span class="k-icon k-warning"> </span> This field is required</span>

I need this to display to the right of the input box, not above it because it covers up other stuff that needs to remain visible.

Thanks