微信小程序 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 相关文章推荐
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
微信小程序 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
终于听上了直流胆调频
2021/03/02 无线电
天津市收音机工业发展史
2021/03/04 无线电
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
js中for in的用法示例解析
2013/12/25 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
vue router demo详解
2017/10/13 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
Python中生成ndarray实例讲解
2021/02/22 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
DBA的职责都有哪些
2012/05/16 面试题
nohup的用法
2012/11/26 面试题
保安公司服务承诺书
2014/05/28 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
招商银行工作证明
2015/06/17 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫