Input 输入框

介绍

表单输入组件，支持单行、多行输入。

用法

普通

有标题

const [v1, setV1] = useState("186");

<OsInput
  label='标题'
  placeholder='默认文案'
  placeholderStyle='color: #7f7f7f;'
  value={v1}
  onChange={(v) => {
    setV1(v);
  }}
></OsInput>

没有标题

const [v2, setV2] = useState("186");

<OsInput
  placeholder='默认文案'
  placeholderStyle='color: #7f7f7f;'
  value={v2}
  onChange={(v) => {
    setV2(v);
  }}
></OsInput>

银行卡

const [v7, setV7] = useState("662712399");

<OsInput
  type='bankcard'
  placeholder='银行行卡/礼品卡号'
  value={v7}
  onChange={(v) => {
    setV7(v);
  }}
></OsInput>

密码输入框

const [v8, setV8] = useState("662712");

<OsInput
  type='password'
  placeholder='请输入密码'
  value={v8}
  onChange={(v) => {
    setV8(v);
  }}
></OsInput>

数字输入框

const [v4, setV4] = useState("123");

<OsInput
  type='number'
  placeholder='请输入数字'
  value={v4}
  onChange={(v) => {
    setV4(v);
  }}
></OsInput>

多行输入

const [v3, setV3] = useState(
  "网易严选秉承网易一贯的严谨态度，深入世界各地，严格把关所有商品的产地"
);

<OsInput
  type='textarea'
  placeholder='请输入文本'
  value={v3}
  onChange={(v) => {
    setV3(v);
  }}
  countDown
  maxLength={200}
></OsInput>

不可编辑

const [v5, setV5] = useState("不可编辑的input");
const [v6, setV6] = useState("不可编辑的textarea");

<OsInput
  label='标题'
  placeholder='请输入文本'
  value={v5}
  onChange={(v) => {
    setV5(v);
  }}
  readonly
></OsInput>
<OsInput
  label='标题'
  placeholder='请输入文本'
  value={v5}
  onChange={(v) => {
    setV5(v);
  }}
  disabled
></OsInput>
<OsInput
  type='textarea'
  label='标题'
  placeholder='请输入文本'
  value={v6}
  onChange={(v) => {
    setV6(v);
  }}
  countDown
  disabled
></OsInput>

API

属性

参数	说明	类型	默认值
type	输入框类型，可选	InputType	text
value	表单值，可选	string	-
placeholder	placeholder，可选	string	-
placeholderStyle	placeholder样式，只支持小程序，可选	string	-
placeholderClass	placeholder样式类，可选	string	-
label	表单说明，可选	string	-
maxLength	最大字符数，可选	number	500
isReadonly	是否可编辑，可选，isReadonly属性在未来版本中将被删除，请使用readonly代替	boolean	false
readonly	是否可编辑，可选	boolean	false
isDisabled	表单是否失效，可选，isDisabled属性在未来版本中将被删除，请使用disabled代替	boolean	false
disabled	表单是否失效，可选	boolean	false
disabledClear	是否隐藏一键删除按钮，可选	boolean	false
countDown	是否显示字符计数器，textarea有效，可选，countDown字段将在未来版本中被移除,请使用showCount代替	boolean	false
showCount	是否显示字符计数器，textarea有效，可选	boolean	false
showSplitLine	是否展示底部分割线，当type为bankcard时无效，可选	boolean	true
taroProps	除了上述属性之外 taro 支持的 属性，可选	{inputProps, textareaProps}	-

方法

函数名	说明	参数
onChange	表单值变化时调用，可选	表单值
onFocus	表单聚焦时调用，可选	事件对象
onBlur	表单值失焦时调用，可选	事件对象

InputType

type 的合法值

参数	说明
text	文本输入键盘
number	数字输入键盘
idcard	身份证输入键盘
digit	带小数点的数字键盘
safe-password	密码安全输入键盘指引
nickname	昵称输入键盘
numberpad	数字输入键盘
digitpad	带小数点的数字键盘
idcardpad	身份证输入键盘
password	密码输入框
bankcard	银行卡号码输入框
textarea	文本域