# Input Demo

* order: 4
* hide:true

weex-format

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Input from 'nuke-normal-input';
import Page from 'nuke-page';
import Button from 'nuke-button';
import { isWeb, isWeex, appInfo } from 'nuke-env';
import { StyleProvider } from 'nuke-theme-provider';

const isAndroid = true;

let md = {
  Core: {
    'color-brand1-1': '#00BBD3',
    'color-brand1-6': '#1A9CB7',
    'color-brand1-9': '#0096A6',
    'color-error-3': '#D50000',
    'color-line1-1': '#DADADA',
    'color-line1-2': '#E0E0E0',
    'color-text1-1': '#9E9E9E',
    ['font-size-title']: 40,
    ['font-size-subhead']: 32,
    ['font-size-body-3']: 28,
    ['font-size-body-2']: 28,
    ['font-size-body-1']: 28,
    ['font-size-caption']: 24,
    ['font-size-footnote']: 20
  },
  Input: {
    'md-placeholder-height': 50,
    'md-help-margin-top': 16,
    'md-input-height': 50,
    'md-placeholder-font-size': 28,
    'md-input-margin-bottom': 0
  }
};

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      cardNumber: '432'
    };
    this.input = this.input.bind(this);
    this.change = this.change.bind(this);
  }
  componentDidMount() {
    if (isWeex) {
      this.refs.input.wrappedInstance.setNativeFormatRule({
        formatRule: '/(\\d{4})(?!$)/g',
        formatReplace: '$1 ',
        recoverRule: '/(\\s*)/g',
        recoverReplace: ''
      });
    }
  }
  input(e) {
    console.log('onInput ==>', e.value);
  }
  change(value, e) {
    console.log('onChange ==>', value);
  }

  render() {
    return (
      <StyleProvider style={md} androidConfigs={{ materialDesign: true }}>
        <Page title="single md">
          <Page.Intro main="cardnumber" />
          <View style={styles.demoBlock}>
            <Input
              maxLength={19}
              type="text"
              defaultValue={this.state.cardNumber}
              ref="input"
              onInput={this.input}
              onChange={this.change}
              placeholder="Format"
            />
          </View>
        </Page>
      </StyleProvider>
    );
  }
};
const styles = {
  demoBlock: {
    marginLeft: 40,
    marginRight: 40
  }
};
render(<App />);
```