微信小程序，实现input 键盘“下一项”功能
2017-06-21 本文已影响238人
Joyang
声明在前，我是做iOS开发的，最近在研究小程序，对HTML了解的也是相当的少，所以你懂的，做小程序反应就稍慢点，不过我在学啊O(∩_∩)O哈哈~。根据官方的小程序简易教程按着流程一步一步的做还是很好入门的，大家有兴趣的可以试一下，保证不是骗人的。
在使用的过程中，我遇到了一个问题：input标签可以设置键盘的confirm键的名字叫“下一项”也就是“next”，但是却没有实现功能。其实在iOS上怎么实现我也不知道，我只知道有一个三方IQKeyboardManager相当好用。
废话不多说，直接汇报结果：
结果图
界面如上图，要实现输入一行，点击下一项继续输入，直到最后一项，键盘收起。
.wxml代码
<view class="container">
<template name="cellViewTemplat">
<view class="cellView">
<view class="cellNameView">{{item.name}}</view>
<input class="cellInputView" focus="{{item.focus}}" id="{{item.inputId}}" confirm-type='{{item.inputId===1008?"done":"next"}}' bindconfirm="confirmBtnClicked" bindfocus="inputFocus" bindblur="inputblur" />
</view>
</template>
<view class="infoView">
<block wx:for="{{list1}}" for-key="key">
<template is="cellViewTemplat" data="{{item}}"></template>
</block>
</view>
<view class="infoView">
<block wx:for="{{list2}}" for-key="key">
<template is="cellViewTemplat" data="{{item}}"></template>
</block>
</view>
<button class="confirmButton">确认保存</button>
</view>
.wxss代码
.container {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.infoView {
padding: 10rpx;
margin: 20rpx;
width: 90%;
border: 1rpx lightgray solid;
border-radius: 8rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.cellView {
margin: 10rpx;
padding: 10rpx;
width: 100%;
border-bottom: 1rpx lightgray dashed;
/*display: flex;
flex-direction: row;
align-items: center;*/
}
.cellNameView {
float: left;
/*width: 30%;*/
/*text-align: center;*/
/*background-color: greenyellow;*/
}
.cellInputView {
float: right;
/*width: 70%;*/
text-align: right;
/*background-color: red;*/
}
.confirmButton {
color: white;
background-color: limegreen;
}
.js代码
Page({
/**
* 页面的初始数据
*/
data: {
list1: [
{
name: '真实姓名',
focus: false,
content:"",
inputId: 1000
},
{
name: '职业',
focus: false,
content: "",
inputId: 1001
},
{
name: '手机',
focus: false,
content: "",
inputId: 1002
},
{
name: '邮箱',
focus: false,
content: "",
inputId: 1003
}
],
list2: [
{
name: '爱车品牌',
focus: false,
content: "",
inputId: 1004
},
{
name: '爱车型号',
focus: false,
content: "",
inputId: 1005
},
{
name: '发动机排量',
focus: false,
content: "",
inputId: 1006
},
{
name: '生产年份',
focus: false,
content: "",
inputId: 1007
},
{
name: '车牌号',
focus: false,
content: "",
inputId: 1008
}
],
},
/**
* confirmButtonCtrl
*/
confirmBtnClicked: function (event) {
console.log(event)
console.log(event.detail)
var that = this
console.log(that.data.list1)
console.log(that.data.list2)
var tempArray1 = that.data.list1
var tempArray2 = that.data.list2
var i = event.target.id - 1000
console.log("confirm-" + i)
if (i < tempArray1.length) {
//list1
tempArray1[i].focus = false
tempArray1[i].content = event.detail.value
if (i !== tempArray1.length - 1) {
tempArray1[i + 1].focus = true
} else {
tempArray2[0].focus = true
}
} else if (i < (tempArray1.length + tempArray2.length)) {
//list2
var j = i - tempArray1.length
tempArray2[j].focus = false
tempArray2[j].content = event.detail.value
if (j !== tempArray2.length - 1) {
tempArray2[j + 1].focus = true
} else {
console.log("all lose focus!")
}
}
that.setData({
list1: tempArray1,
list2: tempArray2
})
if (event.target.id === "1008") {
console.log("print data.list1:")
console.log(this.data.list1)
console.log("print data.list2:")
console.log(this.data.list2)
}
},
inputFocus: function (event) {
// var tempArray1 = this.data.list1
// var tempArray2 = this.data.list2
// var i = event.target.id - 1000
// console.log("inputFocus-" + i)
// if (i < tempArray1.length) {
// //list1
// if (tempArray1[i].focus) {
// return
// }
// tempArray1[i].focus = true
// } else if (i < (tempArray1.length + tempArray2.length)) {
// //list2
// if (tempArray2[i - tempArray1.length].focus) {
// return
// }
// tempArray2[i - tempArray1.length].focus = true
// }
// this.setData({
// list1: tempArray1,
// list2: tempArray2
// })
},
inputblur: function (event) {
// var tempArray1 = this.data.list1
// var tempArray2 = this.data.list2
// var i = event.target.id - 1000
// console.log("inputblur-" + i)
// if (i < tempArray1.length) {
// //list1
// if (!tempArray1[i].focus) {
// return
// }
// tempArray1[i].focus = false
// if (i !== tempArray1.length - 1) {
// tempArray1[i + 1].focus = true
// } else {
// tempArray2[0].focus = true
// }
// } else if (i < (tempArray1.length + tempArray2.length)) {
// //list2
// var j = i - tempArray1.length
// if (!tempArray2[j].focus) {
// return
// }
// tempArray2[j].focus = false
// if (j !== tempArray2.length - 1) {
// tempArray2[j + 1].focus = true
// } else {
// console.log("all lose focus!")
// }
// }
// this.setData({
// list1: tempArray1,
// list2: tempArray2
// })
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
原谅我直接把所有代码都考过来了，哈哈，主要是我不想删，最开始考虑的是直接点击confirm键就下一个input聚焦，但是发现微信小程序这个只能让键盘一弹一收一弹一收，所以我还在input的聚焦和失去聚焦函数里尝试过感觉麻烦 不实际，还是在confirmbutton的响应事件里写吧，万一以后键盘不用一弹一收一弹一收了呢，嘿嘿。
这算是我的一个小笔记吧，以后有时间了还会再写的，可能设计很幼稚，也可能你有更好的方法，欢迎大家留言交流，轻点喷，轻点喷。
