小程序表单组件复选框/input-美观的表单小程序-小程序表单制作-即速应用

小程序表单组件复选框/input-美观的表单小程序-小程序表单制作

浏览量：2685 时间：2020-04-01 来源：有所执着

1.小程序中的复选框和html中相似,可以选择多个值并提交
checkbox-groupbindchange='checkChange'labelwx:for='{{items}}'checkboxvalue='{{item.name}}'checked='{{item.checked}}'{{item.value}}/checkbox/label/checkbox-group
2.一组复选框需要放入checkbox-group中
3.bindchange是勾选或取消勾选复选框时触发的事件
4.label和html中相同,增加勾选的友好性
5.value是传递时要使用的值
6.checked是默认勾选中的复选框
Page({data:{items:[/*数组中的元素是对象*/{name:'USA',value:'美国'},{name:'CHN',value:'中国',checked:'true'},{name:'BRA',value:'巴西'},{name:'JPN',value:'日本'},{name:'ENG',value:'英国'},{name:'TUR',value:'法国'},]},checkChange:function(e){console.log(e.detail.value);/*获取的是一个数组,包含的是选中的value的值,如['中国','日本'],即要传递的值*/}})
7.input文本输入框
8.和html中稍稍有点不同
9.input在小程序中是块级元素,而在html中是行级标签
viewinputtype='text'value='默认值'placeholder='哈哈'/inputtype='password'value=''placeholder='请输入密码'/inputtype='number'placeholder='请输入密码'password='true'//view
10.type是类型,type='number'时,则在手机上调用软键盘时会切换到数字输入界面,更方便而已
11.placeholder属性用于提示用户输入什么信息
12.value可以用默认值,一般由用户输入,用于提交的数据
13.type='password'或者加一个属性password='true'用于密码输入(html中没有password属性这操作)
14.还有两个属性palceholder-class和placeholder-style用于设置placeholder的样式,一个是外部样式,一个是内联样式
viewinputtype='password'placeholder='请输入密码'placeholder-style='font-size:24px'placeholder-class='otherholder'//view
15.在html中使用样式是用class与style属性,小程序中当然也可以使用
16.理解:
17.placeholder不是input的内容,所以使用传统的class,style样式对其无效
18.因此需要palceholder-class和placeholder-style这样的属性
19.其它的属性:
20.maxlength输出的最大长度
21.disabled是否禁用
22.auto-fous自动获取焦点
23.input事件:
24.当用户向input输入框中输入内容或者内容,就会触发的一个事件:bindinput事件
25.在其事件对象中可以获取到输出框中当前的内容
viewinputtype='password'placeholder='请输入内容'bindinput='changeinput'//viewPage({data:{},changeinput:function(e){console.log(e.detail.value);/*获取的值就是当前输入框中的内容*/}})
26.bindinput可以将信息返回到输入框:
27.返回之前可以设置操作,此仅仅示范可以利用返回值做操作
Page({data:{},changeinput:function(e){varval=e.detail.value*2;/*将输入框中的内容放大到2倍*/returnval;}})
28.光标的聚焦和失焦:
viewinputtype='text'placeholder='请输入内容'bindfocus='infocus'bindblur='outfocus'//viewPage({data:{},infocus:function(){console.log("光标聚焦");},outfocus:function(){console.log("光标失焦");}})