小程序表单组件--复选框/input

小程序中的复选框和html中相似, 可以选择多个值并提交

<checkbox-group bindchange='checkChange'>
  <label wx:for='{{items}}'>
    <checkbox value='{{item.name}}' checked='{{item.checked}}'>{{item.value}}</checkbox>
  </label>
</checkbox-group>

一组复选框需要放入checkbox-group中

bindchange是勾选或取消勾选复选框时触发的事件

label和html中相同, 增加勾选的友好性

value是传递时要使用的值

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的值, 如['中国', '日本'], 即要传递的值*/
  }
})

input文本输入框

和html中稍稍有点不同

input在小程序中是块级元素, 而在html中是行级标签

<view>
  <input type='text' value='默认值' placeholder='哈哈'/>
  <input type='password' value='' placeholder='请输入密码'/>
  <input type='number' placeholder='请输入密码' password='true'/>
</view>

type是类型, type='number'时, 则在手机上调用软键盘时会切换到数字输入界面, 更方便而已

placeholder属性用于提示用户输入什么信息

value可以用默认值, 一般由用户输入, 用于提交的数据

type='password' 或者加一个属性password='true'用于密码输入(html中没有password属性这操作)

还有两个属性palceholder-class和placeholder-style用于设置placeholder的样式, 一个是外部样式, 一个是内联样式

<view>
  <input type='password' placeholder='请输入密码' placeholder-style='font-size:24px' placeholder-class='otherholder'/>
</view>

在html中使用样式是用class与style属性, 小程序中当然也可以使用

理解:

placeholder不是input的内容, 所以使用传统的class, style样式对其无效

因此需要palceholder-class和placeholder-style这样的属性

其它的属性:

maxlength输出的最大长度

disabled是否禁用

auto-fous自动获取焦点

input事件:

当用户向input输入框中输入内容或者内容, 就会触发的一个事件: bindinput事件

在其事件对象中可以获取到输出框中当前的内容

<view>
  <input type='password' placeholder='请输入内容' bindinput='changeinput'/>
</view>

Page({
  data: {

  },
  changeinput: function(e){
    console.log(e.detail.value);   /*获取的值就是当前输入框中的内容*/
  }
})

bindinput可以将信息返回到输入框:

返回之前可以设置操作, 此仅仅示范可以利用返回值做操作

Page({
  data: {

  },
  changeinput: function(e){
    var val = e.detail.value * 2;        /*将输入框中的内容放大到2倍*/
    return val;
  }
})

光标的聚焦和失焦:

<view>
  <input type='text' placeholder='请输入内容' bindfocus='infocus' bindblur='outfocus'/>
</view>

Page({
  data: {

  },
  infocus: function() {
    console.log("光标聚焦");
  },
  outfocus: function() {
    console.log("光标失焦");
  }
})

小程序表单组件--复选框/input

猜你喜欢