InputMask Raw Values

The InputMask.value property returns the full text content of the control, including the user's input and any template characters. Use the rawValue property to get or set the control value to exclude any template characters. This sample displays the raw values next to the controls.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let theSSN = new input.InputMask('#theSSN', { mask: '000-00-0000', valueChanged: showRaw }); // let theZip = new input.InputMask('#theZip', { mask: '00000', valueChanged: showRaw }); // let theZip4 = new input.InputMask('#theZip4', { mask: '00000-0000', valueChanged: showRaw }); // let thePhone = new input.InputMask('#thePhone', { mask: '(999) 000-0000', valueChanged: showRaw }); // function showRaw(sender) { let el = document.getElementById(sender.hostElement.id + 'Raw'); el.textContent = ' rawValue: ' + sender.rawValue; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity InputMask rawValue</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="form-group"> <label for="theSSN">Social Security Number</label> <input id="theSSN"> <span id="theSSNRaw"></span> </div> <div class="form-group"> <label for="theZip">Zip Code</label> <input id="theZip"> <span id="theZipRaw"></span> </div> <div class="form-group"> <label for="theZip4">Zip Code + 4</label> <input id="theZip4"> <span id="theZip4Raw"></span> </div> <div class="form-group"> <label for="thePhone">Phone Number</label> <input id="thePhone"> <span id="thePhoneRaw"></span> </div> </div> </body> </html> body { margin-bottom: 24px; } label { width: 180px; text-align: right; margin-right: 3px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { } // @NgModule({ imports: [WjInputModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity InputMask rawValue</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <div class="form-group"> <label for="theSSN">Social Security Number</label> <wj-input-mask #theSSN id="theSSN" [mask]="'000-00-0000'"></wj-input-mask> <span *ngIf="theSSN.rawValue"> rawValue: {{ theSSN.rawValue }}</span> </div> <div class="form-group"> <label for="theZip">Zip Code</label> <wj-input-mask #theZip id="theZip" [mask]="'00000'"></wj-input-mask> <span *ngIf="theZip.rawValue"> rawValue: {{ theZip.rawValue }}</span> </div> <div class="form-group"> <label for="theZip4">Zip Code + 4</label> <wj-input-mask #theZip4 id="theZip4" [mask]="'00000-0000'"></wj-input-mask> <span *ngIf="theZip4.rawValue"> rawValue: {{ theZip4.rawValue }}</span> </div> <div class="form-group"> <label for="thePhone">Phone Number</label> <wj-input-mask #thePhone id="thePhone" [mask]="'(999) 000-0000'"></wj-input-mask> <span *ngIf="thePhone.rawValue"> rawValue: {{ thePhone.rawValue }}</span> </div> </div> body { margin-bottom: 24px; } label { width: 180px; text-align: right; margin-right: 3px; } <template> <div class="container-fluid"> <div class="form-group"> <label for="theSSN">Social Security Number</label> <wj-input-mask id="theSSN" :mask="'000-00-0000'" :valueChanged="onValueChanged"></wj-input-mask> <span v-if="theSSNRawValue"> rawValue: {{ theSSNRawValue }}</span> </div> <div class="form-group"> <label for="theZip">Zip Code</label> <wj-input-mask id="theZip" :mask="'00000'" :valueChanged="onValueChanged"></wj-input-mask> <span v-if="theZipRawValue"> rawValue: {{ theZipRawValue }}</span> </div> <div class="form-group"> <label for="theZip4">Zip Code + 4</label> <wj-input-mask id="theZip4" :mask="'00000-0000'" :valueChanged="onValueChanged"></wj-input-mask> <span v-if="theZip4RawValue"> rawValue: {{ theZip4RawValue }}</span> </div> <div class="form-group"> <label for="thePhone">Phone Number</label> <wj-input-mask id="thePhone" :mask="'(999) 000-0000'" :valueChanged="onValueChanged"></wj-input-mask> <span v-if="thePhoneRawValue"> rawValue: {{ thePhoneRawValue }}</span> </div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.input'; let App = Vue.extend({ name: 'app', data: function () { return { thePhoneRawValue: '', theZipRawValue: '', theZip4RawValue: '', theSSNRawValue: '' } }, methods: { onValueChanged: function(s){ this[s.hostElement.id + 'RawValue'] = s.rawValue; } } }) let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } label { width: 180px; text-align: right; margin-right: 3px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity InputMask rawValue</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"></div> </body> </html> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjInput from '@grapecity/wijmo.react.input'; // class App extends React.Component { constructor(props) { super(props); this.onValueChanged = (sender) => { this.setState({ [sender.hostElement.id + 'RawValue']: sender.rawValue }); }; this.state = { thePhoneRawValue: '', theZipRawValue: '', theZip4RawValue: '', theSSNRawValue: '' }; } render() { return <div className="container-fluid"> <div className="form-group"> <label htmlFor="theSSN">Social Security Number</label> <wjInput.InputMask id="theSSN" mask="000-00-0000" valueChanged={this.onValueChanged}> </wjInput.InputMask> {this.state.theSSNRawValue ? <span> rawValue: {this.state.theSSNRawValue}</span> : null} </div> <div className="form-group"> <label htmlFor="theZip">Zip Code</label> <wjInput.InputMask id="theZip" mask="00000" valueChanged={this.onValueChanged}> </wjInput.InputMask> {this.state.theZipRawValue ? <span> rawValue: {this.state.theZipRawValue}</span> : null} </div> <div className=" form-group"> <label htmlFor="theZip4">Zip+4 Code</label> <wjInput.InputMask id="theZip4" mask="00000-0000" valueChanged={this.onValueChanged}> </wjInput.InputMask> {this.state.theZip4RawValue ? <span> rawValue: {this.state.theZip4RawValue}</span> : null} </div> <div className="form-group"> <label htmlFor="thePhone">Phone Number</label> <wjInput.InputMask id="thePhone" mask="(999) 000-0000" valueChanged={this.onValueChanged}> </wjInput.InputMask> {this.state.thePhoneRawValue ? <span> rawValue: {this.state.thePhoneRawValue}</span> : null} </div> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> body { margin-bottom: 24px; } label { width: 180px; text-align: right; margin-right: 3px; }