uniapp 多个input输入完成自动切换到下一个输入框-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 多个input输入完成自动切换到下一个输入框。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uni-app 实现表单项“下一项”

<template>
	<view class="phone-num-input-box u-flex u-row-between">

		<!-- 		<view class="uni-form-item uni-column">
			<view class="title">可自动聚焦的input</view>
			<input type="text" class="uni-input" :focus="focus" adjust-position="false" auto-blur="true"
				placeholder="自动获得焦点" />
		</view> -->

		<!-- 	<input v-model="a" type="text" confirm-type="next" @confirm="moveNext('b')" placeholder="测试" />
		<input v-model="b" :focus="focusList" placeholder="测试2" />
		<input v-model="c" :focus="focusList" placeholder="测试3" /> -->

		<!-- confirm-type="next" 键盘  -->

		<view v-for="(item,index) in phone_num" :key="index">
			<input confirm-type="next" maxlength="10" v-model="phone_num[index]" :id="'input-'+ index"
				:focus="focus_index == index" autocomplete="off" autocapitalize="off" autocorrect="off"
				@keyup.delete="funDeletePhoneNum" @confirm="moveNextlll(index)" @focus="funFocusInput"
				placeholder="键盘右下角按钮显示为下一个">
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				focus: false, // input是否聚焦
				msg: "",
				focus_index: -1,
				phone_num: {
					0: '',
					1: '',
					2: '',
					3: '',
					4: '',
					5: '',
					6: '',
					7: '',
					8: '',
					9: '',
					10: ''
				},

				a: '',
				b: '',
				c: '',
				focusList: {
					b: false,
				}
			}
		},

		methods: {

			moveNext(dom) {
				this.focusList[dom] = true;
			},

			// funInputPhoneNum(e) {
			// 	console.log(e,"df")
			// 	var index = (e.target.id).replace('input-', '');
			// 	console.log(index,999)
			// 	var value = e.detail.value;
			// 	// console.log(value,888)
			// 	if (index != '10' && value != '') {
			// 		this.focus_index = Number(index) + 1
			// 		console.log(this.focus_index,777)
			// 	}
			// },

			// 键盘事件
			moveNextlll(index) {
				this.focus_index = Number(index) + 1
				console.log(this.focus_index, 777)
			},


			funDeletePhoneNum(e) {
				var index = (e.target.id).replace('input-', '');
				if (this.phone_num[index] == '' && index > 1) {
					this.focus_index = Number(index) - 1;
				}
			},
			funFocusInput(e) {
				var index = (e.target.id).replace('input-', '');
				if (this.phone_num[index] != '') {
					this.phone_num[index] = '';
				}
			},

			// 点击聚焦输入框
			focusClick() {
				this.focus = true
			},
			// 输入框失去焦点
			// inputCodeBlur(e) {
			// 	let value = e.detail.value
			// 	this.focus = false
			// },
			// 输入框聚焦时触发（没用到）
			inputFocus(e, height) {
				console.log(e)
			},
			// 输入框内容变化事件
			inputCode(e) {
				let value = e.detail.value
				// console.log(value)
				this.code = value
			},
		}
	}
</script>
<style lang="scss" scoped>
	.index {
		padding: 30rpx;

		.content {
			padding: 20rpx;

			.phone-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;

				.phone-input {
					width: calc(100% - 240rpx);
					padding: 16rpx;
					border-bottom: 1rpx solid #eee;
				}

				.get-code {
					text-align: center;
					width: 170rpx;
					font-size: 26rpx;
					border-radius: 50rpx;
					padding: 10rpx 0rpx;
					background: #3c9cff;
					color: #fff;
				}
			}

			// .input-list {
			// 	display: flex;
			// 	align-items: center;

			// 	.input-item {
			// 		width: 0rpx;
			// 	}

			// 	.code-list {
			// 		width: 100%;
			// 		display: flex;
			// 		align-items: center;
			// 		justify-content: space-between;

			// 		.code-item {
			// 			width: 80rpx;
			// 			height: 80rpx;
			// 			text-align: center;
			// 			line-height: 80rpx;
			// 			border: 1rpx solid #eee;
			// 			border-radius: 10rpx;
			// 		}
			// 	}
			// }
		}
	}
</style>