rax-textinput
TypeScript icon, indicating that this package has built-in type declarations

1.4.6 • Public • Published

rax-textinput

npm

支持

Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序

描述

TextInput 是唤起用户输入的基础组件。

当定义 multiline 输入多行文字时其功能相当于 textarea。

安装

$ npm install rax-textinput --save

属性

属性 类型 默认值 必填 描述 支持
multiline boolean - false 定义该属性文本框可以输入多行文字 browser Weex miniApp wechatMiniprogram quickApp miniApp
accessibilityLabel string - false 为元素添加标识 browser
autoComplete boolean - false 添加开启自动完成功能 browser Weex
autofocus boolean - false 添加开启获取焦点 browser Weex miniApp wechatMiniprogram miniApp
onAppear function - false 当前元素可见时触发 browser Weex
editable boolean - false 默认为 true 如果为 fase 则文本框不可编辑 browser Weex miniApp wechatMiniprogram quickApp
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
browser Weex miniApp wechatMiniprogram miniApp
maxLength number - false 设置最大可输入值 browser Weex miniApp wechatMiniprogram miniApp quickApp
maxNumberOfLines number - false 当文本框为 mutiline 时设置最多的行数 browser Weex
numberOfLines number - false 同上设置行数 browser Weex quickApp
placeholder string - false 设置文本框占位符 browser Weex miniApp wechatMiniprogram miniApp quickApp
placeholderColor string #999999 false 设置文本框占位符的颜色 browser Weex miniApp wechatMiniprogram miniApp
password boolean - false 文本框内容密码显示 browser Weex miniApp wechatMiniprogram miniApp quickApp
secureTextEntry boolean - false 同上文本框内容密码显示 browser Weex miniApp wechatMiniprogram miniApp
value string - false 文本框的文字内容 (受控) browser Weex miniApp wechatMiniprogram miniApp quickApp
defaultValue string - false 文本框的文字内容(非受控) browser Weex miniApp wechatMiniprogram miniApp quickApp
enableNative boolean - true 支付宝小程序是否使用原生组件渲染 miniApp quickApp
fixed boolean - false 微信小程序输入框 position 是否为 fixed wechatMiniprogram
confirmType string - false 设置键盘右下角按钮的文字,有效值:done(显示“完成”)、go(显示“前往”)、next(显示“下一个”)、search(显示“搜索”)、send(显示“发送”),平台不同显示的文字略有差异 miniApp wechatMiniprogram
controlled boolean false false 是否为受控组件。为 true 时,TextInput 内容会完全受 value 控制。 browser miniApp quickApp
randomNumber boolean false false 当键盘为数字类型时,是否随机排列。 miniApp
showCount boolean true false 是否渲染字数统计功能(是否删除默认计数器/是否显示字数统计,仅在多行模式生效)。 miniApp wechatMiniprogram
selectionStart number -1 false 获取光标时,选中文本对应的焦点光标起始位置,需要和 selectionEnd 配合使用。 miniApp wechatMiniprogram
selectionEnd number -1 false 获取光标时,选中文本对应的焦点光标结束位置,需要和 selectionStart 配合使用。 miniApp wechatMiniprogram miniApp
onBlur function - false 文本框失焦时调用此函数。onBlur={() => console.log('失焦啦')} browser Weex miniApp wechatMiniprogram miniApp
onFocus function - false 文本框获得焦点时调用此函数 browser Weex miniApp wechatMiniprogram miniApp
onChange function - false 文本框内容变化时调用此函数(用户输入完成时触发。通常在 blur 事件之后) browser Weex miniApp wechatMiniprogram miniApp quickApp
onChangeText function - false 触发时机和onChange一致, 区别在于该函数的参数是文本框内容 browser Weex miniApp wechatMiniprogram miniApp quickApp
onInput function - false 文本框输入内容时调用此函数 browser Weex miniApp wechatMiniprogram miniApp

方法

focus()

取焦点方法(小程序不支持, 快应用不支持)

blur()

失去焦点方法(小程序不支持,快应用不支持)

clear()

清除文本框内容(小程序不支持, 快应用不支持)

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 key={text} style={styles.hashtag}>
            {text}
          </Text>
        );
      }
    });

    return (
      <View style={styles.container}>
        <TextInput
          multiline={true}
          numberOfLines={3}
          style={styles.multiline}
          value={this.state.text}
          onChangeText={text => {
            this.setState({ text });
          }}
        />
        <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
          {hashtags}
        </View>
      </View>
    );
  }
}

class App extends Component {
  state = {
    value: "I am value",
    curText: "<No Event>",
    prevText: "<No Event>",
    prev2Text: "<No Event>",
    prev3Text: "<No Event>"
  };

  inputRef = createRef();

  updateText = text => {
    this.setState(state => {
      return {
        curText: text,
        prevText: state.curText,
        prev2Text: state.prevText,
        prev3Text: state.prev2Text
      };
    });
  };

  render() {
    // define delimiter
    return (
      <View style={styles.root}>
        <View style={styles.container}>
          <TextInput
            autoCapitalize="none"
            placeholder="Enter text to see events"
            autoCorrect={false}
            onChange={event => {
              this.updateText("onChange text: " + event.nativeEvent.text);
            }}
            style={styles.default}
          />

          <Text style={styles.eventLabel}>
            {this.state.curText}
            {"\n"}
            (prev: {this.state.prevText}){"\n"}
            (prev2: {this.state.prev2Text}){"\n"}
            (prev3: {this.state.prev3Text})
          </Text>
        </View>

        <View style={styles.container}>
          <TextInput
            placeholder="Enter text to see events"
            value={this.state.value}
            ref={this.inputRef}
            style={{
              width: '600rpx',
              marginTop: '20rpx',
              borderWidth: "2rpx",
              borderColor: "#dddddd",
              borderStyle: "solid"
            }}
            onChangeText={text => {
              this.setState({
                value: text
              });
            }}
          />

          <View
            style={{
              marginTop: '20rpx'
            }}
            onFocus={e => {
              this.setState({
                value: e.nativeEvent.text
              });
            }}
            onClick={() => {
              this.setState({
                value: "I am value"
              });
            }}
          >
            <Text>Reset</Text>
          </View>
        </View>
        <TextAreaDemo />
      </View>
    );
  }
}

render(<App />, document.body, { driver: DriverUniversal });

注意

  • 支付宝小程序中, input 如果父类是 position: fixed,可以加上 enableNative="false",解决输入框错位问题。
  • 微信小程序中,如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true

Dependents (44)

Package Sidebar

Install

npm i rax-textinput

Weekly Downloads

131

Version

1.4.6

License

BSD-3-Clause

Unpacked Size

184 kB

Total Files

129

Last publish

Collaborators

  • rax-publisher