# Input demo

* order: 1
* hide: true

不同键盘类型

---

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

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
  }
};
let App = class Demo extends Component {
  constructor() {
    super();
    this.state = {
      value: ''
    };
  }
  render() {
    return (
      <StyleProvider
        style={md}
        commonConfigs={{ fixedFont: true }}
        androidConfigs={{ materialDesign: true }}
      >
        <Page title="Input">
          <View style={styles.lineWithMargin}>
            <Input placeholder="password" type="password" />
          </View>
          <View style={styles.lineWithMargin}>
            <Input placeholder="email" type="email" />
          </View>
          <View style={styles.lineWithMargin}>
            <Input placeholder="url" type="url" />
          </View>
          <View style={styles.lineWithMargin}>
            <Input placeholder="tel" type="tel" />
          </View>
          <View style={styles.lineWithMargin}>
            <Input
              placeholder="date"
              type="date"
              onFocus={() => {
                console.log('date onFocus');
              }}
              onInput={() => {
                console.log('date onInput');
              }}
              onChange={(text, event) => {
                console.log(text, event);
              }}
            />
          </View>
          <View style={styles.lineWithMargin}>
            <Input placeholder="time" type="time" />
          </View>
          <View style={styles.lineWithMargin}>
            <Input placeholder="number" type="number" />
          </View>
          <View style={styles.lineWithMargin}>
            <Input placeholder="number 受控" type="number" />
          </View>

          <Page.Intro main="return key" />
          <View style={styles.lineWithMargin}>
            <Input placeholder="next" returnKeyType="next" />
          </View>
          <View style={styles.lineWithMargin}>
            <Input placeholder="search" returnKeyType="search" />
          </View>
          <View style={styles.lineWithMargin}>
            <Input placeholder="send" returnKeyType="send" />
          </View>
          <View style={styles.lineWithMargin}>
            <Input placeholder="done" returnKeyType="done" />
          </View>
        </Page>
      </StyleProvider>
    );
  }
};
const styles = {
  lineWithMargin: {
    marginLeft: 30,
    marginRight: 30
  },
  text: {
    fontSize: 26
  }
};
render(<App />);
```