感谢您的反馈！
-
用户反馈
用户反馈
网络异常，请重新提交！
重新提交
输入框。
| 参数 | 说明 | 类型 | 默认值 |
| value | 当前值 | String/Number | - |
| size | 尺寸 可选值: 'small'(小) 'medium'(中) 'large'(大) |
Enum | 'medium' |
| defaultValue | 初始化值 | String/Number | - |
| onChange | 发生改变的时候触发的回调 |
Function | func.noop |
| onKeyDown | 键盘按下的时候触发的回调 | Function | func.noop |
| disabled | 禁用状态 | Boolean | false |
| maxLength | 最大长度 | Number | null |
| hasLimitHint | 是否展现最大长度样式 | Boolean | false |
| cutString | 当设置了maxLength时，是否截断超出字符串 | Boolean | true |
| readOnly | 只读 | Boolean | false |
| trim | onChange返回会自动去除头尾空字符 | Boolean | false |
| placeholder | 输入提示 | String | - |
| onFocus | 获取焦点时候触发的回调 | Function | func.noop |
| onBlur | 失去焦点时候触发的回调 | Function | func.noop |
| name | name | String | - |
| state | 状态 可选值: 'error'(错误) 'loading'(校验中) 'success'(成功) |
Enum | - |
| hasClear | 是否出现clear按钮 | Boolean | - |
| hasBorder | 是否有边框 | Boolean | true |
| onPressEnter | 按下回车的回调 | Function | func.noop |
| hint | 水印 (Icon的type类型，和hasClear占用一个地方) | String | - |
| addonTextBefore | 输入框前附加文字 | String | - |
| addonTextAfter | 输入框后附加文字 | String | - |
| autoFocus | 自动聚焦 | Boolean | - |
| htmlType | 文本框的类型（支持password） | String | - |
| selectionStart |
设置字段文本的选定部分的开始
（最低千牛版本： 7.22.00N）
|
String | - |
| selectionEnd | 设置字段文本的选定部分的结束
（最低千牛版本： 7.22.00N）
|
String | - |
<view class="com-wrap">
<view class="com-title">简单</view>
<input class="block" size="large" placeholder="Large" aria-label="Large" />
<input class="block" placeholder="Medium" aria-label="Medium" aria-labelledby="J_inputMedium" />
<input placeholder="Small" size="small" label="SIZE :"/>
<view class="com-title">密码输入框</view>
<input class="block" htmlType="password" defaultValue="whoami" aria-label="Please input password"/>
<view class="com-title">禁用状态</view>
<input disabled aria-label="disabled" placeholder="medium" maxLength="10" hasLimitHint/>
<view class="com-title">前后拓展</view>
<view class="wrap">
<input hasLimitHint
class="long mb"
addonTextBefore="http://"
addonTextAfter=".com"
size="large"
defaultValue="alibaba"
maxLength="2"
aria-label="input with config of addonTextBefore and addonTextAfter" />
<input
class="long mb"
addonTextBefore="http://"
addonTextAfter=".com"
size="medium"
defaultValue="非受控组件"
aria-label="input with config of addonTextBefore and addonTextAfter" />
<input
class="long mb"
addonTextBefore="http://"
addonTextAfter=".com"
size="small"
value="受控组件"
aria-label="input with config of addonTextBefore and addonTextAfter" />
</view>
<view class="com-title">清除按钮</view>
<view class="wrap">
<input
class="mb"
hasClear
defaultValue="clear by click"
size="small"
aria-label="input with config of hasClear" />
<input
class="mb"
hasClear
defaultValue="2019-09-10 10:10:20"
aria-label="input with config of hasClear"
hint="calendar"/>
<input
class="mb"
hasClear
defaultValue="clear by click"
size="large"
aria-label="input with config of hasClear"/>
</view>
<view class="com-title">错误状态</view>
<view style="display:flex;flex-wrap:wrap;">
<input
class="error"
state="error"
placeholder="error"
size="small"
aria-live="assertive"
aria-label="error" />
<input state="error"
class="error"
hasLimitHint
maxLength="100"
placeholder="error"
size="medium"
aria-live="assertive"
aria-label="error" />
<input state="error"
class="error"
multiple
placeholder="error"
size="large"
aria-live="assertive"
aria-label="error" />
<input state="success"
class="error"
size="small"
value="success"
aria-live="assertive"
aria-label="success"/>
<input state="success"
class="error"
maxLength="100"
hasLimitHint
placeholder="success"
size="medium"
aria-live="assertive"
aria-label="success"/>
<input state="success"
class="error"
placeholder="success"
size="large"
aria-live="assertive"
aria-label="success"/>
<input state="loading"
class="error"
placeholder="loading"
size="small"
aria-live="assertive"
aria-label="loading"/>
<input state="loading"
class="error"
placeholder="loading"
size="medium"
aria-live="assertive"
aria-label="loading"/>
<input state="loading"
class="error"
placeholder="loading"
size="large"
aria-live="assertive"
aria-label="loading"/>
</view>
<view class="com-title">最大长度</view>
<view class="wrap">
<input
class="mb"
maxLength="10"
size="large"
placeholder="Large"
value="this.state.control"
hasLimitHint
aria-label="input max length 10" />
<input
class="mb"
maxLength="20"
placeholder="medium"
hasLimitHint
cutString="false"
aria-label="input max length 20" />
<input
class="mb"
hasLimitHint
size="small"
placeholder="small"
maxLength="100"
aria-label="input max length 100" />
<input class="mb" maxLength="5" placeholder="Original maxLength" aria-label="input max length 5" />
</view>
<view class="com-title">去除空格</view>
<input class="mb" trim placeholder="cant not input space" aria-label="cant not input space"/>
</view>
// API-DEMO page/component/input/input.js
Page({
data: {
vvv: 111
},
foo() {
this.setData({
vvv: ''
})
}
});