跳到主要内容

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输入框类型,可选InputTypetext
value表单值,可选string-
placeholderplaceholder,可选string-
placeholderStyleplaceholder样式,只支持小程序,可选string-
placeholderClassplaceholder样式类,可选string-
label表单说明,可选string-
maxLength最大字符数,可选number500
isReadonly是否可编辑,可选,isReadonly属性在未来版本中将被删除,请使用readonly代替booleanfalse
readonly是否可编辑,可选booleanfalse
isDisabled表单是否失效,可选,isDisabled属性在未来版本中将被删除,请使用disabled代替booleanfalse
disabled表单是否失效,可选booleanfalse
disabledClear是否隐藏一键删除按钮,可选booleanfalse
countDown是否显示字符计数器,textarea有效,可选,countDown字段将在未来版本中被移除,请使用showCount代替booleanfalse
showCount是否显示字符计数器,textarea有效,可选booleanfalse
showSplitLine是否展示底部分割线,当typebankcard时无效,可选booleantrue
taroProps除了上述属性之外 taro 支持的 属性,可选{inputProps, textareaProps}-

方法

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

InputType

type 的合法值

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