【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}}的值即是组件的值

 

posted @ 2018-11-08 16:49 网申 阅读(...) 评论(...) 编辑 收藏