输入框。
效果展示
示例代码
WXML
<view class="page">
<view class="page__hd">
<text class="page__title">input</text>
<text class="page__desc">输入框</text>
</view>
<view class="page__bd">
<view class="section">
<view>value</view>
<input placeholder="value" value="string" />
<input placeholder="value" value="1" />
<input placeholder="value" value="{{true}}" />
</view>
<view>type</view>
<view class="section">
<input type="text" placeholder="这是一个文本输入框" />
</view>
<view class="section">
<input type="number" placeholder="这是一个数字输入框" />
</view>
<view>type</view>
<view class="section">
<input password="{{true}}" placeholder="这是一个密码输入框" />
</view>
<view class="section">
<input password="{{false}}" placeholder="这不是一个密码输入框" />
</view>
<view class="section">
<input password placeholder="这是一个密码输入框" />
</view>
<view class="section">
<input password type="number" placeholder="这是一个密码输入框" />
</view>
<view>placeholder-style</view>
<view class="section">
<input placeholder-style="color:red;font-size:20px;" cursor-spacing="10" placeholder="占位符字体是红色的" />
</view>
<view class="section">
<input placeholder-class="input-placeholder" placeholder="占位符默认样式" />
</view>
<view class="section">
<input placeholder-class="my-input-placeholder" placeholder="占位符样式" />
</view>
<view>disabled</view>
<view class="section">
<input type="text" disabled placeholder="这是一个禁用输入框" />
</view>
<view class="section">
<input type="text" disabled="{{true}}" placeholder="这是一个禁用输入框" />
</view>
<view class="section">
<input type="text" disabled="{{false}}" placeholder="这不是一个禁用输入框" />
</view>
<view>maxlength</view>
<view class="section">
<input maxlength="10" placeholder="最大输入长度10" />
</view>
<view class="section">
<input maxlength="-1" placeholder="不限制最大输入长度" />
</view>
<view>bindinput--{{e_input}}</view>
<view class="section">
<view class="section__title">你输入的是:{{inputValue}}</view>
<input bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>
<view>bindfocus--{{e_focus}}</view>
<view class="section">
<input bindfocus="bindfocus" placeholder="聚焦了" />
</view>
<view>bindblur--{{e_blur}}</view>
<view class="section">
<input bindblur="bindblur" placeholder="失去焦点" />
</view>
</view>
</view>
JS
Page({
data:{
focus:false,
inputValue:"",
e_focus: 'e_focus',
e_blur: 'e_blur',
e_confirm: 'e_confirm',
e_keyboardheightchange: 'e_keyboardheightchange',
e_input: 'e_input'
},
bindButtonTap:function(){
this.setData({
focus:true
})
},
bindKeyInput:function(e){
this.setData({
inputValue:e.detail.value,
e_input: JSON.stringify(e.detail)
})
},
bindReplaceInput:function(e){
var value = e.detail.value;
var pos = e.detail.cursor;
if(pos != -1){
//光标在中间
var left = e.detail.value.slice(0,pos);
//计算光标的位置
pos = left.replace(/11/g,'2').length;
}
//直接返回对象,可以对输入进行过滤处理,同时可以控制光标的位置
return {
value:value.replace(/11/g,'2'),
cursor:pos
}
//或者直接返回字符串,光标在最后边
//return value.replace(/11/g,'2'),
},
bindHideKeyboard:function(e){
if(e.detail.value === "123"){
//收起键盘
wx.hideKeyboard();
}
},
bindfocus(event){
console.log("聚焦了", event.detail);
this.setData({
e_focus: JSON.stringify(event.detail)
})
},
bindblur(event){
console.log("失去焦点", event.detail);
this.setData({
e_blur: JSON.stringify(event.detail)
})
},
bindconfirm(event) {
console.log("confirm", event.detail);
this.setData({
e_confirm: JSON.stringify(event.detail)
})
},
bindkeyboardheightchange(event) {
console.log("keyboardheightchange", event.detail);
this.setData({
e_keyboardheightchange: JSON.stringify(event.detail)
})
}
})
WXSS
.my-input-placeholder {
color: green;
}
API
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
value | string | 否 | 输入框的初始内容 | |
type | string | text | 否 | input 的类型 |
password | boolean | false | 否 | 是否是密码类型 |
placeholder | string | 否 | 输入框为空时占位符 | |
placeholder-style | string | 否 | 指定 placeholder 的样式 | |
placeholder-class | string | input-placeholder | 否 | 指定 placeholder 的样式类 |
disabled | boolean | false | 否 | 是否禁用 |
maxlength | number | 140 | 否 | 最大输入长度,设置为 -1 的时候不限制最大长度 |
confirm-hold | boolean | false | 否 | 点击键盘右下角按钮时是否保持键盘不收起 |
bindinput | eventhandle | 否 | 键盘输入时触发,event.detail = {value, cursor} | |
bindfocus | eventhandle | 否 | 输入框聚焦时触发,event.detail = { value } | |
bindblur | eventhandle | 否 | 输入框失去焦点时触发,event.detail = {value: value} |
- 若password为true,type设置无效
type 的合法值
值 | 说明 |
---|---|
text | 文本输入键盘 |
number | 数字输入键盘 |
多平台支持
属性 | 支持平台 |
---|---|
value | 支付宝 |
type | 支付宝 |
password | 支付宝 |
placeholder | 支付宝 |
placeholder-style | 支付宝 |
placeholder-class | 支付宝 |
disabled | 支付宝 |
maxlength | 支付宝 |
confirm-hold | 支付宝 |
bindinput | 支付宝 |
bindfocus | 支付宝 |
bindblur | 支付宝 |
注释:
number类型在支付宝开发工具中无效,在真机会弹出定制数字键盘,支付宝input组件的type属性为非法值时会弹出数字键盘,confirm-hold为非boolean时,默认false