Kendo UI MaskedTextBox Format Stripper

unmask databound maskedtextbox value

by Joe Meeks

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
<div id="home" data-role="view" data-model="vm">
   <div data-role="header">
      <div data-role="navbar">MaskedTextBox Format Stripper</div>
   </div>
   <div data-role="content">
        <ul data-role="listview">
          <li>
              <label>
                  Home Phone: 
                  <input type="text" data-role="maskedtextbox" data-bind="value: homePhone, events: { change: maskStrip }" data-mask="(000) 000-0000" placeholder="(702) 000-0000" />
              </label>
          </li>
          <li>
              <label>
                  Cell Phone: 
                  <input type="text" data-role="maskedtextbox" data-bind="value: cellPhone, events: { change: maskStrip }" data-mask="(000) 000-0000" placeholder="(420) 999-9999" />
              </label>
          </li>
       </ul>
       <h2>Values will be updated on blur</h2>
       <p>Home Phone Value: <span data-bind="text: homePhone"></span></p>
       <p>Cell Phone Value: <span data-bind="text: cellPhone"></span></p>
       <div id="results"></div>
   </div>
</div>

CSS

h2 { margin: 1em; padding: 0 }
p { margin: 1em; padding: 0; color: #999; font-size: 0.8em }

JavaScript

var app, vm;
$(function() {
    vm = kendo.observable({
        homePhone: null,
        cellPhone: null,
        maskStrip: function (e) {
            //$('#results').html('<p>value changed</p>');
            var that = e.sender,
                stripped = that._unmask(that.value()),
                obs = e.data,
                val = that.element.data("bind");
            if (val) {
                val = val.substring(val.indexOf('value: ') + 7); //remove properties before
                if (val.indexOf(',') > -1) val = val.substring(0, val.indexOf(',')); //remove properties after
                obs.set(val, stripped);
            }
        }
    });
    app = new kendo.mobile.Application(document.body);
});