# rax-textinput
[](https://www.npmjs.com/package/rax-textinput)
## 支持
Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序
## 描述
TextInput 是唤起用户输入的基础组件。
当定义 multiline 输入多行文字时其功能相当于 textarea。
## 安装
```bash
$ npm install rax-textinput --save
```
## 属性
| **属性** | **类型** | **默认值** | **必填** | **描述** | **支持** |
| ------------------ | ---------- | ---------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| multiline | `boolean` | - | false | 定义该属性文本框可以输入多行文字 | 
|
| accessibilityLabel | `string` | - | false | 为元素添加标识 | |
| autoComplete | `boolean` | - | false | 添加开启自动完成功能 | |
| autofocus | `boolean` | - | false | 添加开启获取焦点 | |
| onAppear | `function` | - | false | 当前元素可见时触发 | |
| editable | `boolean` | - | false | 默认为 true 如果为 fase 则文本框不可编辑 | |
| keyboardType | `string` | - | false | 设置弹出哪种软键盘
web 支持的值有：`default` `ascii-capable` `numbers-and-punctuation` `url` `number-pad` `phone-pad` `name-phone-pad` `email-address` `decimal-pad` `twitter` `Web-search` `numeric`
支付宝小程序支持的值有：`text` `number` `idcard` `digit` `numberpad` `digitpad` `idcardpad`
微信小程序支持的值有：`text` `number` `idcard` `digit` | |
| maxLength | `number` | - | false | 设置最大可输入值 | |
| maxNumberOfLines | `number` | - | false | 当文本框为 mutiline 时设置最多的行数 | |
| numberOfLines | `number` | - | false | 同上设置行数 | |
| placeholder | `string` | - | false | 设置文本框占位符 | |
| placeholderColor | `string` | #999999 | false | 设置文本框占位符的颜色 | |
| password | `boolean` | - | false | 文本框内容密码显示 | |
| secureTextEntry | `boolean` | - | false | 同上文本框内容密码显示 | |
| value | `string` | - | false | 文本框的文字内容 (受控) | |
| defaultValue | `string` | - | false | 文本框的文字内容（非受控） | |
| enableNative | `boolean` | - | true | 支付宝小程序是否使用原生组件渲染 | |
| fixed | `boolean` | - | false | 微信小程序输入框 `position` 是否为 `fixed` | |
| confirmType | `string` | - | false | 设置键盘右下角按钮的文字，有效值：done（显示“完成”）、go（显示“前往”）、next（显示“下一个”）、search（显示“搜索”）、send（显示“发送”），平台不同显示的文字略有差异 | |
| controlled | `boolean` | false | false | 是否为受控组件。为 true 时，TextInput 内容会完全受 value 控制。 | |
| randomNumber | `boolean` | false | false | 当键盘为数字类型时，是否随机排列。 | |
| showCount | `boolean` | true | false | 是否渲染字数统计功能（是否删除默认计数器/是否显示字数统计，仅在多行模式生效）。| |
| selectionStart | `number` | -1 | false | 获取光标时，选中文本对应的焦点光标起始位置，需要和 selectionEnd 配合使用。| |
| selectionEnd | `number` | -1 | false | 获取光标时，选中文本对应的焦点光标结束位置，需要和 selectionStart 配合使用。| |
| onBlur | `function` | - | false | 文本框失焦时调用此函数。`onBlur={() => console.log('失焦啦')}` | |
| onFocus | `function` | - | false | 文本框获得焦点时调用此函数 | |
| onChange | `function` | - | false | 文本框内容变化时调用此函数（用户输入完成时触发。通常在 blur 事件之后） | |
| onChangeText | `function` | - | false | 触发时机和`onChange`一致, 区别在于该函数的参数是文本框内容 | |
| onInput | `function` | - | false | 文本框输入内容时调用此函数 | |
## 方法
### focus()
取焦点方法(小程序不支持， 快应用不支持)
### blur()
失去焦点方法(小程序不支持，快应用不支持)
### clear()
清除文本框内容(小程序不支持， 快应用不支持)
```jsx
import { createElement, Component, render, createRef } from "rax";
import DriverUniversal from "driver-universal";
import View from "rax-view";
import Text from "rax-text";
import TextInput from "rax-textinput";
const styles = {
root: {
width: '750rpx',
paddingTop: '20rpx'
},
container: {
padding: '20rpx',
borderStyle: "solid",
borderColor: "#dddddd",
borderWidth: '1rpx',
marginLeft: '20rpx',
marginRight: '20rpx',
marginBottom: '10rpx'
},
default: {
borderWidth: '1rpx',
borderColor: "#0f0f0f",
flex: 1
},
eventLabel: {
margin: '3rpx',
fontSize: '24rpx'
},
multiline: {
borderWidth: '1rpx',
borderColor: "#0f0f0f",
flex: 1,
fontSize: '26rpx',
height: '100rpx',
padding: '8rpx',
marginBottom: '8rpx'
},
hashtag: {
color: "blue",
margin: '10rpx',
fontWeight: "bold"
}
};
class TextAreaDemo extends Component {
constructor(props) {
super(props);
this.state = {
text: "Hello #World , Hello #Rax , Hello #天天好心情"
};
}
render() {
let delimiter = /\s+/;
// split string
let _text = this.state.text;
let token,
index,
parts = [];
while (_text) {
delimiter.lastIndex = 0;
token = delimiter.exec(_text);
if (token === null) {
break;
}
index = token.index;
if (token[0].length === 0) {
index = 1;
}
parts.push(_text.substr(0, index));
parts.push(token[0]);
index = index + token[0].length;
_text = _text.slice(index);
}
parts.push(_text);
let hashtags = [];
parts.forEach(text => {
if (/^#/.test(text)) {
hashtags.push(
{text}
);
}
});
return (
{
this.setState({ text });
}}
/>
{hashtags}
);
}
}
class App extends Component {
state = {
value: "I am value",
curText: "",
prevText: "",
prev2Text: "",
prev3Text: ""
};
inputRef = createRef();
updateText = text => {
this.setState(state => {
return {
curText: text,
prevText: state.curText,
prev2Text: state.prevText,
prev3Text: state.prev2Text
};
});
};
render() {
// define delimiter
return (
{
this.updateText("onChange text: " + event.nativeEvent.text);
}}
style={styles.default}
/>
{this.state.curText}
{"\n"}
(prev: {this.state.prevText}){"\n"}
(prev2: {this.state.prev2Text}){"\n"}
(prev3: {this.state.prev3Text})
{
this.setState({
value: text
});
}}
/>
{
this.setState({
value: e.nativeEvent.text
});
}}
onClick={() => {
this.setState({
value: "I am value"
});
}}
>
Reset
);
}
}
render(, document.body, { driver: DriverUniversal });
```
## 注意
- 支付宝小程序中， input 如果父类是 position: fixed，可以加上 enableNative="false"，解决输入框错位问题。
- 微信小程序中，如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true