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

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

表单组件

（1）input输入框组件

基础属性：

属性	类型	默认值	是否必填	作用
value	string	无	否	输入框的初始内容
type	string	text	否	input 的类型
password	boolean	false	否	是否是密码类型
disabled	boolean	false	否	是否禁用
maxlength	number	140	否	最大输入长度，设置为 -1 的时候不限制最大长度
placeholder	string	无	否	输入框为空时占位符

1、type类型—type属性值

值	作用
text	文本输入键盘
number	数字输入键盘
idcard	身份证输入键盘
digit	带小数点的数字键盘

2、占位符placeholder属性

属性	类型	默认值	是否必填	作用
placeholder-style	string	无	否	指定 placeholder 的内联样式
placeholder-class	string	input-placeholder	否	指定 placeholder 的样式类名

<input placeholder="请输入姓名" placeholder-style="color:#e1565b;font-size:20rpx;"></input>

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

<input placeholder="请输入姓名" 
placeholder-class="placeClassName"></input>

.placeClassName{
   
   
  color: blue;
}

3、焦点类属性

属性	类型	默认值	是否必填	作用
focus	boolean	false	否	获取焦点，加上后会自动聚焦
bindfocus	function	无	否	输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
bindblur	function	无	否	输入框失去焦点时触发，event.detail = {value: value}

bindfocus：

<input placeholder="请输入姓名" 
value="默认初始值"
bindfocus="bindfocusFn"
placeholder-class="placeClassName"></input>

  /**获取授权页面相关数据 */
  bindopensettingFn(option){
   
   
    console.log(option)
  },

bindblur：

<input placeholder="请输入姓名" 
value="默认初始值"
bindfocus="bindfocusFn"
bindblur="bindblurFn"
placeholder-class="placeClassName"></input>

/**输入框失去焦点时触发 */
  bindblurFn(option){
   
   
    console.log(option)
  },

4、键盘与键盘按钮

属性	类型	默认值	是否必填	作用
confirm-type	string	done	否	设置键盘右下角按钮的文字，仅在type='text’时生效
cursor-spacing	number	0	否	聚焦时光标离软键盘的距离(了解即可)
bindconfirm	function	无	否	点击完成按钮时触发，event.detail = {value: value}

confirm-type属性值：

值	作用
send	右下角按钮为“发送”
search	右下角按钮为“搜索”
next	右下角按钮为“下一个”
go	右下角按钮为“前往”
done	右下角按钮为“完成”

一般需要开发人员根据业务的情景选择合适的confirm-type

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

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

cursor-spacing	number	0	否	聚焦时光标离软键盘的距离

<input placeholder="0" cursor-spacing="0"></input>
<input placeholder="50" cursor-spacing="50"></input>
<input placeholder="100" cursor-spacing="100"></input>