input输入框组件说明:
本文介绍input 输入框的各种参数及特性。
input输入框示例代码运行效果如下：
下面是WXML代码：
type：有效值：text 感觉没什么区别 password： placeholder： disable: 最大长度：
wechat-miniprogram-plugin是基于JetBrains平台的微信小程序插件。主要功能wxml/wxss/wxs文件支持语法解析代码完成代码高亮wxml嵌入表达式支持wxml 标签支持wxml提取自定义组件创建微信小程序组件以及页面相关文件导航微信小程序自定义组件支持自动注册自定义组件组件配置解析重命名小程序自定义组件或页面同时移动自定义组件或页面的所有文件微信小程序配置文件支持
下面是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, digit |
String |
text |
password |
是否是密码类型 |
Boolean |
false |
placeholder |
输入框为空时占位符 |
String |
|
placeholder-style |
指定 placeholder 的样式 |
String |
|
placeholder-class |
指定 placeholder 的样式类 |
String |
input-placeholder |
disabled |
是否禁用 |
Boolean |
false |
maxlength |
最大输入长度， 设置为-1 的时候不限制最大长度 |
Number |
140 |
auto-focus |
自动聚焦，拉起键盘。页面中只能有一个 input 或 textarea标签时， 设置 auto-focus 属性 |
Boolean |
false |
focus |
获取焦点（当前开发工具暂不支持） |
Boolean |
false |
bindinput |
除了date/time类型外的输入框，当键盘输入时，触发input事件，处理函数可以直接 return 一个字符串，将替换输入框的内容。 |
EventHandle |
|
bindfocus |
输入框聚焦时触发event.detail = {value: value} |
EventHandle |
|
bindblur |
输入框失去焦点时触发event.detail = {value: value} |
EventHandle |
属性解析：
下面是WXML代码：
等同于 等同于 等同于 等同于 等同于
