# Input Demo

* order: 4

单行文本 md 定制

---

```js
/** @jsx createElement */
import { View, Text, Input, Page, Button, Env, ThemeProvider } from 'weex-nuke';
const { isWeb, appInfo } = Env;
const { StyleProvider } = ThemeProvider;
import { createElement, Component, render } from 'rax';
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: ''
    };
    this.validateCreditCard = this.validateCreditCard.bind(this);
    // this.checkLengthOnInput = this.checkLengthOnInput.bind(this);
    // this.change = this.change.bind(this);
    // this.onIconPress = this.onIconPress.bind(this);
  }
  validateCreditCard(e) {
    let newValue = this.cc_format(e.value);
    if (newValue !== e.value) {
      this.setState({
        cardNumber: newValue
      });
    } else {
    }
  }

  cc_format(value) {
    var v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
    var matches = v.match(/\d{4,16}/g);
    var match = (matches && matches[0]) || '';
    var parts = [];
    var len = match.length;
    for (var i = 0; i < len; i += 4) {
      parts.push(match.substring(i, i + 4));
    }

    if (parts.length) {
      return parts.join(' ');
    } else {
      return 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"
              value={this.state.cardNumber}
              onInput={this.validateCreditCard}
              placeholder="Credit Card"
              status={this.state.status1}
              errorMessage={this.state.errorMessage}
            />
          </View>
        </Page>
      </StyleProvider>
    );
  }
};
const styles = {
  demoBlock: {
    marginLeft: 40,
    marginRight: 40
  }
};
render(<App />);
```