微信小程序input使用
这个input 自己也是花费了2个多小时,熟悉,下面将一一讲解经常使用的里面的属性
value
这个value 就是input中的内容,
如果我们想获取input中输入的内容,value是必须使用的
使用可以在input中 定义 value='{{phone}}' 然后在data中初始化就行了,如果写死的input里面就是死的数据
type
type 就 很简单了设置输入的类型
主要内容如下
,注意type在模拟器无效,可以在真机中测试使用
password
它的类型是boolean 那么我们使用的时候 password:"true" 或者password:"false" 就行了
placeholder
这个就是占位符, input里面提示的字体,点击输入内容占位符会消失,
placeholder-style
指定样式,假如想改变占位符的样色可以使用如下
placeholder-style="color:#00d8a0"
placeholder-style
改变样式的时候使用
假如想改占位符字体的大小,可以使用如下,
placeholder-class="placeholderStyle"
然后到wxss中
.placeholderStyle{
font-size: 30rpx;
}
这样占位符字体颜色就可以改变了
maxlength
限定input输入内容的大小 ,注意在模拟器无效,可以在真机中测试使用
confirm-type
改变键盘右下角的样式,注意在type="text"才生效
使用的需要注意微信提供了几种类型
加入想变成搜索,可以使用confirm-type="search" 其他设置指定样式即可.
bindinput
也是经常使用,为了获取input输入内容呢,
写一个例子吧 如下
xml中内容
<view class="container">
<input class="input_coding" placeholder-style="color:#00d8a0" placeholder-class="placeholderStyle" bindinput="phone_num"
value='{{phone}}' confirm-type="search"placeholder='请输入手机号' style='box-shadow: 0 0 1px #00d8a0' type='text' maxlength='11'/>
</view>
js中
data: {
phone:"",
},
phone_num:function(res){
console.log("====hly======",res)
this.setData({
phone: res.detail.value
})
console.log("============phone==",this.data.phone)
},
之前有人问为啥res.detail.value就是phone的值,
我写了打印的值
取值就是根据路径来的,
demo地址参考