uniapp中的input，输入input回车事件和输入input事件

被窝是圆的

已于 2022-03-28 16:27:03 修改

阅读量2.1w

点赞数 5

分类专栏： uniapp 文章标签：微信小程序

于 2022-03-28 16:24:06 首次发布

本文链接：https://blog.youkuaiyun.com/m0_61169066/article/details/123798567

版权

本文介绍了在uniapp中如何处理input输入框的回车事件和输入事件，通过data定义和methods方法，实现了在车辆信息搜索框中，当输入值不为空时，点击键盘回车键能够跳转到车辆信息界面的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<input class="inputclass font28" 
				v-model="inputvalue" @input="input"
				 placeholder="搜索" placeholder-class="color999 " 
				  confirm-type="search" @confirm="doSearch"/>

data定义

//搜索框
				inputvalue:'',

methods方法

	//当键盘输入时，触发input事件，
			input(){
				//搜索框不为空
				if(this.inputvalue!=''){
				//显示搜索界面
					this.status=2
				}else{
				//显示当前界面
					this.status=1
				}
			},
			//键盘点击回车
			doSearch(){
				//显示搜索结果
				this.status=3
			},

实现效果--车辆信息点击搜索框实现，当输入值！==‘’--------实现搜索界面，点击键盘回车------------实现车辆信息界面

全部代码

<template>
	<view class="paddingbox">
		<!--搜索-->
		<view class="searchbox lightgreyBack flexbox alignitem">
			<view class="iconfont icon-sousuo color666"></view>
			<view class="ml16 font28">
				<input class="inputclass font28" 
				v-model="inputvalue" @input="input"
				 placeholder="搜索" placeholder-class="color999 " 
				  confirm-type="search" @confirm="doSearch"/>
			</view>
		</view>
		<!--搜索-->
		<view class="mt48 containitem " v-if="status==1">
			<view class="fwbold font32">我的搜索</view>
			<view class="mt20 containitem1 lightgreyBack">
				<view class="searchbox1 " v-for="(item,index) in list" :key="index">
					<vie