【input】输入框组件说明

input输入框组件

原型：

<input
    value="[String]"
    type="[text | number | idcard | digit]"
    password="[Boolean]"
    placeholder="[String]"
    placeholder-style="[String]"
    placeholder-class="[String]"
    disabled="[Boolean]"
    maxlength="[Number]"
    cursor-spacing="[Number | String]"
    focus="[Boolean]"
    confirm-type="[done | send | search | next | go ]"
    confirm-hold="[Boolean]"
    cursor="[Number]"
    selection-start="[Number]"
    selection-end="[Number]"
    adjust-position="[Boolean]"
    bindinput="[EventHandle]"
    bindfocus="[EventHandle]"
    bindblur="[EventHandle]"
    bindconfirm="[EventHandle]"

>
</input>

 

属性：

名称	是否必需	类型	默认值	说明
value	否	[String]		输入框的初始内容
type	否	[text | number | idcard | digit]	text	输入框输入键盘类型 text  文本输入键盘 number 数字输入键盘 idcard 身份证输入键盘 digit 带小数点的数字键盘
password	否	[Boolean]	false	是否是密码类型
placeholder	否	[String]		输入框为空时占位符
placeholder-style	否	[String]		指定 placeholder 的样式
placeholder-class	否	[String]	input-placeholder	指定 placeholder 的样式类
disabled	否	[Boolean]	false	是否禁用
maxlength	否	[Number]	140	最大输入长度（设置为-1时不限制最大长度）
cursor-spacing	否	[Number | String]	0	指定光标与键盘的距离，单位px或rpx，默认为px。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
focus	否	[Boolean]	false	自动聚焦，拉起键盘
confirm-type	否	[done | send | go | next | search]	done	设置键盘右下角按钮的文字，仅在type='text'时生效 send    右下角按钮为“发送” search    右下角按钮为“搜索” next    右下角按钮为“下一个” go    右下角按钮为“前往” done    右下角按钮为“完成”
confirm-hold	否	[Boolean]	false	点击键盘右下角按钮时是否保持键盘不收起 值为false时，点击键盘右下角按钮时，键盘关闭 值为true时，点击键盘右下角按钮时，键盘仍然存在
cursor	否	[Number]		指定focus时的光标位置
selection-start	否	[Number]	-1	光标起始位置，自动聚集时有效，需与selection-end搭配使用
selection-end	否	[Number]	-1	光标结束位置，自动聚集时有效，需与selection-start搭配使用
adjust-position	否	[Boolean]	true	键盘弹起时，是否自动上推页面
bindinput	否	[EventHandle]		键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocus	否	[EventHandle]		输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持
bindblur	否	[EventHandle]		输入框失去焦点时触发，event.detail = {value: value}
bindconfirm	否	[EventHandle]		点击完成按钮时触发，event.detail = {value: value}

 

示例一：点击按钮获取input组件值

<!-- index.wxml -->
<view>
  <input class="weui-input" value="{{inputValue}}" bindinput="setValue" auto-focus placeholder="请输入文本"/>
</view>
<view>
  <button bind:tap="getValue">点击获取input组件值</button>
</view>

 

<!-- index.js -->
Page({
  data: {
    inputValue: ''
  },
  setValue(e){   
    this.setData({
      inputValue: e.detail.value
    });
  },
  getValue(){
    console.log(this.data.inputValue);
  }
})

说明：

第一步将组件input的值与变量{{inputValue}}邦定

第二步通过组件input的input事件，同步更新变量{{inputValue}}值

第三步变量{{inputValue}}的值即是组件的值