34.微信小程序（组件--表单：交互控件）

微信小程序（组件–表单：交互控件）

前言

（1）input输入框组件
（2）textarea多行输入框组件
（3）form表单组件
（4）radio-group单选选择器与radio单选项目
（5）label关联组件
（6）checkbox-group多选选择器与checkbox多选项目

表单组件

（1）input输入框组件

基础属性

在这里插入图片描述

基础属性—type类型

在这里插入图片描述

type属性值

在这里插入图片描述

占位符placeholder相关

占位符placeholder属性

在这里插入图片描述

注意：placeholder字体大小默认与input字体大小相同，不能分开设置，不然应用户体验。方案：给input设置字体大小即可

焦点类属性

在这里插入图片描述

键盘与键盘按钮

在这里插入图片描述

confirm-type属性值

在这里插入图片描述

注意：confirm-type的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持。

场景：当填写项较多时，可能超出当前屏幕，此时需要对弹起的软键盘做些处理

在这里插入图片描述

input输入框现有bug：

①部分微信版本placeholder 在聚焦时出现重影问题
②部分机型 focus 属性设置无效
③input 组件是一个原生组件，字体是系统字体，所以无法设置 font-family

（2）textarea多行输入框组件

在这里插入图片描述

应用场景：发表评论或发布帖子，点击按钮跳到评论页面
发布评论页面代码块

（3）form表单组件

作用：将组件内的用户输入的switch input checkbox slider radio picker 提交在这里插入图片描述
注意：当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key

回顾下button按钮组件

form-type触发表单提交/重置操作
在这里插入图片描述
form-type 属性值

提交评论操作

在这里插入图片描述
注意：
提交表单时，必要在需要提交信息的表单组件上，加上 name 来作为 key，否则会获取不到相关信息
接下来做些完善，评论完毕后弹框提示，然后返回上一页面
完善一

接下来接着做完善，提交时验证最少10个字，否则弹框提示
完善二
在这里插入图片描述
接下来接着做完善，输入字体时，实时监听目前输入多少字
完善三
①实时获取输入时字体数量

接下来接着做完善，输入字体时，实时监听目前输入多少字