card组件 微信小程序_详解微信小程序组件：input输入框

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代码：

等同于

等同于

等同于

等同于

等同于