小程序极速实战开发《十》input输入框

发布：2018-01-25 16:34浏览：次来源：网络作者：tianshu

组件说明:

input 输入框。

效果展示

属性效果图：

wxml

<view class="content">
type：有效值：text 感觉没什么区别
<input placeholder="type=text" type="text" value="" />
<input placeholder="type=number" type="number" value="" />
<input placeholder="type=idcard" type="idcard" value="" />
<input placeholder="type=digit" type="digit" value="" />
password：
<input type="text" password="{{false}}" placeholder="请输入密码"/>
<input type="text" password="{{true}}" placeholder="请输入密码"/>
placeholder：
<input placeholder="占位符" />
disable:
<input placeholder="disable={{false}}" disabled='{{false}}'/>
<input placeholder="disable={{true}}" disabled='{{true}}'/>
最大长度：
<input maxlength="10" placeholder="maxlength='10'最多长度10字符"/>
<input maxlength="5" placeholder="maxlength='5'最多长度5字符"/>
<input maxlength="-1" placeholder="值为-1，则不限制长度"/>
</view>

wxss

.content{
border:1px black solid;
margin: 10px;
font-size: 10pt;
padding: 5px;
}
input{
border:1px red solid;
margin: 5px;
}

事件效果图：

wxml

1. <view class="content">
2. bindinput="当内容改变"
3. <input bindinput="bindinput"/>
4. bindfocus:当获取焦点
5. <input bindfocus="bindfocus"/>
6. bindblur：当失去焦点触发
7. <input bindblur="bindblur"/>
8. 内容：
9. <view style="color:blue">
10. {{log}}
11. </view>
12. </view>

1. Page({
2. data:{
3. log:'事件触发'
4. },
5. bindblur:function(e){
6. var value=e.detail.value;
7. this.setData({
8. log:"bindblur失去焦点.输入框值="+value
9. })
10. },
11. bindinput:function(e){
12. var value=e.detail.value;
13. this.setData({
14. log:"bindinput内容改变.输入框值="+value
15. })
16. },
17. bindfocus:function(e){
18. var value=e.detail.value;
19. this.setData({
20. log:"bindfocus获取焦点.输入框值="+value
21. })
22. }
23. })

wxss

1. .content{
2. border:1px black solid;
3. margin: 10px;
4. font-size: 10pt;
5. padding: 5px;
6. }
7. input{
8. border:1px red solid;
9. margin: 5px;
10. }

组件属性：

属性	描述	类型	默认值
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

1. 
2. 
3. <input value="内容"/>
4. 
5. <input type="text"/>
6. <input type="number"/>
7. <input type="idcard"/>
8. <input type="digit"/>
9. 
10. <input password="{{true}}"/>
11. <input password/> 等同于 <input password="{{false}}"/>
12. 
13. <input placeholder="占位符" placeholder-class="占位符静态样式" placeholder-style="占位符动态样式，可用{{}}进行动态赋值"/>
14. 
15. <input disabled="{{true}}"/>
16. <input disabled/> 等同于 <input disabled="{{false}}"/>
17. 
18. <input maxlength="100"/>
19. <input maxlength/> 等同于 <input maxlength="140"/>
20. 
21. <input focus="{{true}}"/>
22. <input focus/> 等同于 <input focus="{{false}}"/>
23. 
24. <input auto-focus="{{true}}"/>
25. <input auto-focus/> 等同于 <input auto-focus="{{false}}"/>
26. 
27. 
28. <input bindinput="自己定义函数名">
29. 
30. <input bindfocus="自己定义函数名">
31. 
32. <input bindblur="自己定义函数名">

上一篇：小程序极速实战开发《十一》label标签

下一篇：小程序极速实战开发《九》form表单

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

微信小程序开发工具常用快捷键2018-06-09
微信小程序架构分析《一》调试技巧，模块构成，理念分析2018-02-07
微信小程序架构分析《二》：view 模块和 service 模块的构成2018-02-07
微信小程序架构分析《三》：实现过程以及实时更新2018-02-07
梁兴臣:微信小程序开发三宗罪和解决方案2018-02-07
微信小程序使用Promise实践2018-02-07
微信小程序开发系列分析《一》视图层2018-02-07
微信小程序开发系列分析《二》数据层2018-02-07
微信小程序官方文档个人分析心得2018-02-07
微信小程序的原型设计尝鲜2018-02-07