input

输入框。

效果展示

示例代码

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 的时候不限制最大长度
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