微信小程序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地址参考

demo地址如果帮助了您希望给一个star