微信小程序 input输入框详解及简单实例


Posted in Javascript onJanuary 10, 2017
微信小程序输入框input

相关文章:

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现效果图:

微信小程序 input输入框详解及简单实例

微信小程序输入框input
属性名 类型 默认值 说明
value String   输入框的内容
type String text input的类型,有效值:text,number,idcard,digit,time,date
password Boolean false 是否是密码类型
placeholder String   输入框为空时占位符
placeholder-style String   指定placeholder的样式
placeholder-class String input-placeholder 指定placeholder的样式类
disabled Boolean false 是否禁用
maxlength Number 140 最大输入长度,设置为0的时候不限制最大长度
auto-focus Boolean false 自动聚焦,拉起键盘。页面中只能有一个input设置auto-focus属性
focus Boolean false 使得input获取焦点
bindchange EventHandle   输入框失去焦点时,触发bindchange事件,event.detail={value:value}
bindinput EventHandle   除了date/time类型外的输入框,当键盘输入时,触发input事件,event.detail={value:value},处理函数可以直接return一个字符串,将替换输入框的内容。
bindfocus EventHandle   输入框聚焦时触发,event.detail = {value:value}
bindblur EventHandle   输入框失去焦点时触发,event.detail = {value:value}
示例代码:
<!--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 bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
</view>
<view class="section">
 <input type="emoji" placeholder="这是一个带有表情的输入框" />
</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:Date.now()
 })
 },
 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'),
 },
 bindHideKeyboard:function(e){
 if(e.detail.value === "123"){
 //收起键盘
 wx.hideKeyboard();
 }
 }
})
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
Javascript 相关文章推荐
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
jquery实现拖动效果
Aug 10 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
微信小程序 form组件详解及简单实例
Jan 10 #Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 #Javascript
使用vue.js实现联动效果的示例代码
Jan 10 #Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 #Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 #Javascript
jQuery zTree树插件简单使用教程
Jan 10 #Javascript
详解JS中的快速排序与冒泡
Jan 10 #Javascript
You might like
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
python list使用示例 list中找连续的数字
2014/01/27 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
python的文件操作方法汇总
2017/11/10 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
详解Python的三种拷贝方式
2020/02/11 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
python-地图可视化组件folium的操作
2020/12/14 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
就业推荐表自我鉴定
2014/03/21 职场文书
应届生求职信范文
2014/06/30 职场文书
趣味运动会广播稿
2014/09/13 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
外出听课学习心得体会
2016/01/15 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
详解Python为什么不用设计模式
2021/06/24 Python
Pandas数据类型之category的用法
2021/06/28 Python
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
python的变量和简单数字类型详解
2021/09/15 Python