uni-app 實現(xiàn)表單項“下一項”

<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
			// },
			// 輸入框聚焦時觸發(fā)（沒用到）
			inputFocus(e, height) {
				console.log(e)
			},
			// 輸入框內(nèi)容變化事件
			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>

文章來源地址http://www.zghlxwxcb.cn/news/detail-632455.html

到了這里，關(guān)于uniapp 多個input輸入完成自動切換到下一個輸入框的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！