微信小程序 input输入框控件
今天主要详写一下微信小程序中的Input输入框控件，输入框在程序中是最常见的，登录，注册，获取搜索框中的内容等等都需要，同时，还需要设置不同样式的输入框，今天的代码中都要相应的使用。 首先主页面中将登录的样式进行了简单展示和使用，
代码如下：
rush:js;">
用户名：
用户名"
bindinput="userNameInput"/>
登录
{{infoMess}}
{{userName}}
{{passWd}}
//index.js
rush:js;">
//获取应用实例
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: '',passW:'',})
},onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
rush:js;">
获取焦点
键盘"/>
rush:js;">
// 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,},bindHideKeyboard: function(e) {
if (e.detail.value === "123") {
//收起键盘
wx.hideKeyboard()
}
},onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},onReady:function(){
// 页面渲染完成
},onShow:function(){
// 页面显示
},onHide:function(){
// 页面隐藏
},onUnload:function(){
// 页面关闭
}
})
效果图：
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
原文地址：https://www.jb51.cc/weapp/43553.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
