input输入框组件说明:
本文介绍input 输入框的各种参数及特性。
input输入框示例代码运行效果如下:
下面是WXML代码:
type:有效值:text 感觉没什么区别
password:
placeholder:
disable:
最大长度:
下面是WXSS代码:
.content{
border:1px black solid;
margin: 10px;
font-size: 10pt;
padding: 5px;
}
input{
border:1px red solid;
margin: 5px;
}
事件效果图:
下面是WXML代码:
bindinput="当内容改变"
bindfocus:当获取焦点
bindblur:当失去焦点触发
内容:
{{log}}
下面是JS代码:Page({
data:{
log:'事件触发'
},
bindblur:function(e){
var value=e.detail.value;
this.setData({
log:"bindblur失去焦点.输入框值="+value
})
},
bindinput:function(e){
var value=e.detail.value;
this.setData({
log:"bindinput内容改变.输入框值="+value
})
},
bindfocus:function(e){
var value=e.detail.value;
this.setData({
log:"bindfocus获取焦点.输入框值="+value
})
}
})
下面是WXSS代码:.content{
border:1px black solid;
margin: 10px;
font-size: 10pt;
padding: 5px;
}
input{
border:1px red solid;
margin: 5px;
}
组件属性:属性描述类型默认值
value输入框的初始内容String
type有效值:text, number, idcard, digitStringtext
password是否是密码类型Booleanfalse
placeholder输入框为空时占位符String
placeholder-style指定 placeholder 的样式String
placeholder-class指定 placeholder 的样式类Stringinput-placeholder
disabled是否禁用Booleanfalse
maxlength最大输入长度, 设置为-1 的时候不限制最大长度Number140
auto-focus自动聚焦,拉起键盘。页面中只能有一个 input 或 textarea标签时, 设置 auto-focus 属性Booleanfalse
focus获取焦点(当前开发工具暂不支持)Booleanfalse
bindinput除了date/time类型外的输入框,当键盘输入时,触发input事件,处理函数可以直接 return 一个字符串,将替换输入框的内容。EventHandle
bindfocus输入框聚焦时触发event.detail = {value: value}EventHandle
bindblur输入框失去焦点时触发event.detail = {value: value}EventHandle
属性解析:
下面是WXML代码:
等同于
等同于
等同于
等同于
等同于