TextInput 输入框

API#

TextInput 是唤起用户输入的基础组件。
当定义 multiline 输入多行文字时其功能相当于 textarea。

TextInput#

属性	说明	类型	默认值
multiline	定义该属性文本框可以输入多行文字	boolean	false
accessibilityLabel	为元素添加标识	string	无
autoComplete	添加开启自动完成功能	boolean	false//todo
autoFocus	添加开启获取焦点	boolean	false
editable	文本框是否可编辑	boolean	true
keyboardType	设置弹出哪种软键盘可用的值有`default` `ascii-capable` `numbers-and-punctuation` `url` `number-pad` `phone-pad` `name-phone-pad` `email-address` `decimal-pad` `twitter` `web-search` `numeric`	string	default
maxLength	设置最大可输入值	number	无
maxNumberOfLines	当文本框为mutiline时设置最多的行数	number	无
numberOfLines	同上设置行数	number	无
placeholder	设置文本框提示	string	无
password	文本框内容密码显示		//todo
secureTextEntry	同上文本框内容密码显示		//todo
value	文本框的文字内容	string	无
onBlur	文本框失焦时调用此函数。	event	无
onFocus	文本框获得焦点时调用此函数	event	无
onChange	文本框内容变化时调用此函数	event	无
onInput	文本框输入内容时调用此函数	event	无

代码演示

预览二维码

/* @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text, TextInput } from 'nuke-components';
import { Link } from 'nuke';
import {mount} from 'nuke-mounter';


let App = class Page extends Component {
  constructor(props){
    super(props);
  }
  render() {
    return <View style={{width:720}}>
              <Text>最上边的TextInput输入框</Text>
              <TextInput
              placeholder="试着输入一些内容"
              autoFocus multiline
              onFocus={() => console.log('onFocus')}
              onBlur={() => console.log('onBlur')}
              onInput={() => console.log('onInput')}
              style={{
                  width: '200rem',
                  height: '200rem',
                  border: '1px solid # 000'
              }}
            />

          </View>;
  }
}
mount(<App/>, mountNode);

输入框

自动化的输入框。