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'),
  }
})



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

微信小程序组件_小程序内容组件_小程序text

text 

 文本。


 
属性名
类型
默认值
说明
最低版本
selectable
Boolean
false
文本是否可选
1.1.0
space
String
false
显示连续空格
1.4.0
decode
Boolean
false
是否解码
1.4.0
 
space 有效值：
 
值
说明
ensp
中文字符空格一半大小
emsp
中文字符空格大小
nbsp
根据字体设置的空格大小
 
Tips
 
decode可以解析的有   < > & '    
各个操作系统的空格标准并不一致。
<text/> 组件内只支持 <text/> 嵌套。
除了文本节点以外的其他节点都无法长按选中。

示例：
代码片段
<view class="btn-area">
  <view class="body-view">
    <text>{{text}}</text>
    <button bindtap="add">add line</button>
    <button bindtap="remove">remove line</button>
  </view>
</view>


var initData = 'this is first line\nthis is second line'
var extraLine = [];
Page({
  data: {
    text: initData
  },
  add: function(e) {
    extraLine.push('other line')
    this.setData({
      text: initData + '\n' + extraLine.join('\n')
    })
  },
  remove: function(e) {
    if (extraLine.length > 0) {
      extraLine.pop()
      this.setData({
        text: initData + '\n' + extraLine.join('\n')
      })
    }
  }
})




 

 
 
 
 
 

   1111.jpg
 
 
 
 把玩微信小程序组件
 
 微信小程序把玩《二》：页面生命周期，模块化，数据绑定，view组件
 
 微信小程序把玩《三》：scroll-view组件，swiper组件，icon组件
 
 微信小程序把玩《四》：text组件，progress组件，button组件
 
 微信小程序把玩《五》：checkbox组件，form组件，input组件
 
 微信小程序把玩《六》：picker组件，radio组件，slider组件
 
 微信小程序把玩《七》：switch组件，action-sheet组件，modal组件
 
 微信小程序把玩《八》：toast组件，loading组件，navigator组件
 
 微信小程序实用小组件：自定义tabbar
 
 微信小程序组件之marquee
 
 微信小程序搜索组件wxSearch
 
 微信小程序实用组件：自定义弹框toast
 
 使用组件化开发框架wech
 
 微信小程序实用组件之MaterialDesign-- Snackbar
 
 微信小程序编写tabBar模板，map组件markers属性动态初始化
 
 微信小程序之MaterialDesign--input组件
 
 微信小程序提示框toast组件—wxui的使用
 
 小程序组件应用和实例
 
 微信小程序实用组件：日历签到
 
 小程序基于Map组件实现路线规划
 
 微信小程序日历组件-calendar
 
 小程序scroll-view中，image组件出现滚轴
 
 WeZRender：微信小程序Canvas增强组件
 
 微信小程序：ofo共享单车之地图组件
 
 微信小程序开发—表单组件
 
 微信小程序新增拖动组件：movable-view
 
 微信小程序实用组件：modal和toast通用插件封装
 
 微信小程序canvas组件简单运用之涂鸦
 
 微信小程序中input组件的type属性3个值的作用
 
 微信小程序实用组件：联系人右侧拼音导航
 
 微信小程序实用组件：手势解锁
 
 使用小程序的scroll-view组件实现列表页
 
 WePY 1.5.5 发布，小程序组件化开发框架
 
 小程序组件化框架 WePY 在性能调优上做出的探究
 
 微信小程序开发之小程序组件label标签解读以及分析实例
 
 微信小程序UI组件、开发框架、实用库.
 
 github精选：艺龙小程序框架组件
 
 github精选：摩拜单车小程序组件化解决方案wx-component
 
 微信小程序组件wxParse中的模版template使用
 
 微信小程序倒计时组件更新，加入时间校准功能
 
 使用小程序组件化开发框架wepy
 
 slider滑动选择器组件学习笔记
 
 button组件学习笔记
 
 wepy详细教程： 一个组件化开发的小程序框架
 
 微信小程序图片宽度自动，获取组件数据
 
 mage组件binderror实例，使用百度api获取天气信息
 
 微信小程序实用组件：侧滑 删除项目（真机可用）
 
 微信小程序小组件：仿直播点赞气泡效果，基于Canvas
 
 微信小程序组件开发示例：上传图片组件
 
 微信小程序组件化方案示例
 
 微信小程序小技巧系列《七》五星评分，制作微信小程序组件
 
 小程序组件问答跳坑精选
 
 官方问答精选《九》js如何获取当前组件的宽高，jsEnginScriptError错误
 
 官方问答精选《二》Linux版，UnionId，苹果手机组件参数问题
 
 官方问答精选《十七》mac卡死问题，scroll-view组件自适应适配
 
 问答《七十九》跳转失败，循环渲染组件内的元素
 
 SF问答精选《七》 多组件显示与隐藏如何实现、function中的...
 
 微信小程序小技巧《十七》富文本组件wxParse，制作回到顶部按钮
 
 跳坑《一百零五》map组件，地图使用相关问题
 
 跳坑《二百零九》textarea组件value不显示
 
 跳坑《一百一十三》组件系列：scroll-view
 
 跳坑《一百五十》swiper轮播图组件使用说明
 
 问答《七十五》scroll-view组件 与 onPullDownRefresh不能同时使用
 
 问答《五十七》getStorageSync取值为空，input组件调用setData
 
 跳坑《一百四十六》button按钮组件使用说明
 
 跳坑《一百四十五》image图片组件使用问题说明
 
 微信小程序组件：环信SDK
 
 Mjw：微信小程序之踩坑之旅二，textarea 组件的 bug（含10M动图）
 
 微信小程序wx.request组件的那些坑
 
 小程序组件Demo:
 
 微信小程序Demo：录音、群分享、loading样式、城市组件等
 
 微信小程序Demo：小程序组件
 
 微信小程序实用组件：仿闲鱼下拉菜单
 
 精品组件：艺龙小程序框架：picker，选择日历，下拉菜单
 
 微信小程序Demo：各种测试组件
 
 微信小程序Demo： 广告栏组件（页面效果）
 
 微信小程序实用组件：省市区三级联动demo
 
 微信小程序demo：168彩票通；拼音排序组件
 
 微信小程序精品组件：可自定义的微信小程序Topbar组件
 
 微信小程序demo：日历组件
 
 微信小程序使用组件：联系人字母检索
 
 微信小程序自定义组件：带未读数目的tabBar按钮（适用1221）
 
 微信小程序小组件：仿直播点赞气泡效果，基于Canvas
 
 组件大全（对话框、指示器、五星评分，画廊，影院座位
 
 微信小程序demo：致简生活：天气预报，城市选择组件
 
 微信小程序学习用demo：Truck：基于map组件的找车源
 
 微信小程序demo：致简生活：天气预报，城市选择组件
 
 微信小程序实用组件：右侧字母检索，例子（体验杠杠的）
 
 微信小程序组件学习demo：录音机，RECORD组件真机可用
 
 微信小程序翻译组件
 
 纯微信小程序 emoji解析组件

在微信小程序组件Component({}) 外写的变量就是全局变量，这点和vue与react组件不同，后者都会重置赋值变量，但是在微信小程序中，只会重置Component({})里的数据，这样就提供很多可操作性：
 
比如，在外面定义list，每次creat的时候，push(this) ， 这样在组件内部，就可以拿到所有循环组件的方法，非常方便。