本页目录
常见问题输入框是否支持点击事件，比如 tap、touch？input 如何用 js 代码清空数据？input 内容跳动、延迟如何处理？iOS 在输入中文的时候出现丢焦情况，怎么办？input 支持自动聚焦吗？（autofocus）

Input

版本要求:
@ray-js/ray≥0.5.10

描述

输入框组件，支持多种输入类型和键盘配置。

属性

属性类型必填默认值说明
valuestring否-输入框的内容
type"text" | "number" | "digit" | "idcard"否text输入类型
namestring否-表单控件名称，提交表单时作为键名
passwordboolean否-是否为密码输入框
placeholderstring否-输入框为空时占位符
placeholderStyleany | string否-占位符的样式
disabledboolean否-是否禁用
maxLengthnumber否140最大输入长度，设置为 -1 的时候不限制最大长度
confirmType"send" | "search" | "next" | "go" | "done"否done设置键盘右下角按钮的文字，仅在 type='text' 时生效
否-键盘输入时触发
否-点击完成按钮时触发
否-输入框聚焦时触发
否-输入框失去焦点时触发

合法值

type
值说明最低版本
text文本输入键盘-
number数字输入键盘-
digit带小数点的数字输入键盘-
idcard身份证输入键盘-
confirmType
值说明最低版本
send右下角按钮显示为“发送”-
search右下角按钮显示为“搜索”-
next右下角按钮显示为“下一个”-
go右下角按钮显示为“前往”-
done右下角按钮显示为“完成”-

示例代码

基础用法

import React from 'react';
import { Input, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Input
        placeholder="请输入内容"
        onInput={(e) => console.log('输入:', e.detail.value)}
      />
    </View>
  );
}

不同类型

import React, { useState } from 'react';
import { Input, View, Text } from '@ray-js/ray';

export default function () {
  const [textValue, setTextValue] = useState('');
  const [numberValue, setNumberValue] = useState('');
  const [passwordValue, setPasswordValue] = useState('');

  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '16px' }}>
        <Text>文本输入:</Text>
        <Input
          type="text"
          placeholder="请输入文本"
          value={textValue}
          onInput={(e) => setTextValue(e.detail.value)}
          style={{ marginTop: '8px' }}
        />
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Text>数字输入:</Text>
        <Input
          type="number"
          placeholder="请输入数字"
          value={numberValue}
          onInput={(e) => setNumberValue(e.detail.value)}
          style={{ marginTop: '8px' }}
        />
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Text>密码输入:</Text>
        <Input
          password
          placeholder="请输入密码"
          value={passwordValue}
          onInput={(e) => setPasswordValue(e.detail.value)}
          style={{ marginTop: '8px' }}
        />
      </View>
    </View>
  );
}

输入限制与禁用

import React from 'react';
import { Input, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '16px' }}>
        <Text>最大长度 10:</Text>
        <Input
          maxLength={10}
          placeholder="最多输入 10 个字符"
          placeholderStyle={{ color: '#ccc', fontSize: '14px' }}
          style={{ marginTop: '8px' }}
        />
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Text>禁用状态:</Text>
        <Input
          disabled
          value="不可编辑"
          style={{ marginTop: '8px' }}
        />
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Text>确认按钮为搜索:</Text>
        <Input
          confirmType="search"
          placeholder="输入后点键盘搜索"
          onConfirm={(e) => console.log('确认:', e.detail.value)}
          onFocus={(e) => console.log('聚焦:', e.detail.value)}
          onBlur={(e) => console.log('失焦:', e.detail.value)}
          style={{ marginTop: '8px' }}
        />
      </View>
    </View>
  );
}

常见问题

输入框是否支持点击事件，比如 tap、touch？

支持，所有的组件都支持 tap、touch 事件

input 如何用 js 代码清空数据？

通过setData 给属性 value 设置为空，需要保证setData数值有变化。

input 内容跳动、延迟如何处理？

可以使用防抖函数。避免 onInput 的时候频繁更新。

iOS 在输入中文的时候出现丢焦情况，怎么办？

iOS的input在onInput中执行setData会导致在输入中文的时候丢焦。① 可对setData执行防抖操作 ②onInput的时候将数据存储在 this下，避免一直 触发setData操作。

input 支持自动聚焦吗？（autofocus）

  • 不支持自动聚焦（autofocus），必须用户行为唤起