Nautilus: Pelagic Mollusc

    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

    Install

    npm i rax-textinput

    DownloadsWeekly Downloads

    68

    Version

    1.4.6

    License

    BSD-3-Clause

    Unpacked Size

    184 kB

    Total Files

    129

    Last publish

    Collaborators

    • rax-publisher