微信小程序 input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用。
代码如下:
index.wxml
rush:html;toolbar:false">用户名: 密 码: {{infoMess}} {{userName}} {{passWd}} 各类型输入框展示
index.js
rush:js;toolbar:false">//获取应用实例 var app = getApp() Page({ data: { infoMess: '', userName: '', userN:'', passWd: '', passW:'' }, //用户名和密码输入框事件 userNameInput:function(e){ this.setData({ userN:e.detail.value }) }, passWdInput:function(e){ this.setData({ passW:e.detail.value }) }, //登录按钮点击事件,调用参数要用:this.data.参数; //设置参数值,要使用this.setData({})方法 loginBtnClick:function(){ if(this.data.userN.length == 0 || this.data.passW.length == 0){ this.setData({ infoMess:'温馨提示:用户名和密码不能为空!', }) }else{ this.setData({ infoMess:'', userName:'用户名:'+this.data.userN, passWd:'密码:'+this.data.passW }) } }, //重置按钮点击事件 resetBtnClick:function(e){ this.setData({ infoMess: '', userName: '', userN:'', passWd: '', passW:'', }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) } })
TextInput.wxml
rush:html;toolbar:false">TextInput输入框展示 你输入的是:{{inputValue}}
TextInput.js
rush:js;toolbar:false">// pages/index/Component/TextInput/TextInput.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'), }, bindHideKeyboard: function(e) { if (e.detail.value === "123") { //收起键盘 wx.hideKeyboard() } }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } })
效果图:
bedb155b51568389eb8f3adcf.jpg" style="border: 1px solid rgb(204, 204, 204); vertical-align: bottom; padding: 1px; overflow: hidden; max-width: 650px;"/>
ottom; padding: 1px; overflow: hidden; max-width: 650px;"/>
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
原文链接:http://blog.csdn.net/hbblzjy/article/details/53609402
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。