注册

微信小程序表单组件输入框input,微信小程序获取输入框

2020-09-27
导读:input 输入框。 属性名 类型 默认值 说明 最低版本 value String 输入框的初始内容 type String text input 的类型 password Boolean false 是否是密码类型 placeholder String 输入框为空时占位符 placeholder...

input

微信小程序表单组件输入框input,微信小程序获取输入框


 

输入框。

属性名 类型 默认值 说明 最低版本
value String   输入框的初始内容  
type String "text" input 的类型  
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 0 指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离  
auto-focus Boolean false (即将废弃,请直接使用 focus )自动聚焦,拉起键盘  
focus Boolean false 获取焦点  
confirm-type String "done" 设置键盘右下角按钮的文字 1.1.0
confirm-hold Boolean false 点击键盘右下角按钮时是否保持键盘不收起 1.1.0
bindinput EventHandle   当键盘输入时,触发input事件,event.detail = {value: value},处理函数可以直接 return 一个字符串,将替换输入框的内容。  
bindfocus EventHandle   输入框聚焦时触发,event.detail = {value: value}  
bindblur EventHandle   输入框失去焦点时触发,event.detail = {value: value}  
bindconfirm EventHandle   点击完成按钮时触发,event.detail = {value: value}  

 

 

type 有效值:

说明
text 文本输入键盘
number 数字输入键盘
idcard 身份证输入键盘
digit 带小数点的数字键盘

confirm-type 有效值:

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

 

示例代码:

<!--input.wxml-->
<view class="section">
    <input placeholder="这是一个可以自动聚焦的input" auto-focus/>
</view>
<view class="section">
    <input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
    <view class="btn-area">
        <button bindtap="bindButtonTap">使得输入框获取焦点</button>
    </view>
</view>
<view class="section">
    <input  maxlength="10" placeholder="最大输入长度10" />
</view>
<view class="section">
    <view class="section__title">你输入的是:{{inputValue}}</view>
    <input  bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>
<view class="section">
    <input  bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
</view>
<view class="section">
    <input password type="number" />
</view>
<view class="section">
    <input password type="text" />
</view>
<view class="section">
    <input type="digit" placeholder="带小数点的数字键盘"/>
</view>
<view class="section">
    <input type="idcard" placeholder="身份证输入键盘" />
</view>
<view class="section">
    <input placeholder-style="color:red" placeholder="占位符字体是红色的" />
</view>
//input.js
Page({
  data:{
    focus:false,
    inputValue:""
  },
  bindButtonTap:function(){
    this.setData({
      focus: true
    })
  },
  bindKeyInput:function(e){
    this.setData({
      inputValue:e.detail.value
    })
  },
  bindReplaceInput:function(e){
    var value = e.detail.value;
    var pos = e.detail.cursor;
    if(pos != -1){
      //光标在中间
      var left = e.detail.value.slice(0,pos);
      //计算光标的位置
      pos = left.replace(/11/g,'2').length;
    }

    //直接返回对象,可以对输入进行过滤处理,同时可以控制光标的位置
    return {
      value:value.replace(/11/g,'2'),
      cursor:pos
    }

    //或者直接返回字符串,光标在最后边
    //return value.replace(/11/g,'2'),
  }
})

微信小程序表单组件输入框input,微信小程序获取输入框

Bug & Tip

  1. bug : 微信版本6.3.30, focus 属性设置无效;
  2. bug : 微信版本6.3.30, placeholder 在聚焦时出现重影问题;
  3. tip : input 组件是一个 native 组件,字体是系统字体,所以无法设置 font-family;
  4. tip : 在 input 聚焦期间,避免使用 css 动画;

 

更多微信小程序开发教程,可以关注hi小程序。
重磅推荐:小程序开店目录

第一部分:小商店是什么

第二部分:如何开通一个小商店

第三部分:如何登录小商店

第四部分:开店任务常见问题

第五部分:小商店可以卖什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收货/物流

第九部分:小程序怎么结算

第十部分:小程序客服

第十一部分:电商创业

第十二部分:小程序游戏开发