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

原创 已于 2022-03-28 16:27:03 修改 · 2.2w 阅读 · 22 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序

于 2022-03-28 16:24:06 首次发布
本文介绍了在uniapp中如何处理input输入框的回车事件和输入事件，通过data定义和methods方法，实现了在车辆信息搜索框中，当输入值不为空时，点击键盘回车键能够跳转到车辆信息界面的功能。
部署运行你感兴趣的模型镜像 
<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">
					<view class="searchbox1item flexbox alignitem"  @click="todetail">
						<view class="searchbox1itemleft">
							<image :src="item.src" mode="aspectFit"></image>
								<!-- <image src="" mode="aspectFit"></image>	 -->
								</view>
						<view class="searchbox1itemright" :class="list.length-1==index ?'':'lightgreyborder'">
							<view class="flexbox alignitem">
								<view class="colorfff btn bg999 font24" v-if="item.status==1">
									离线
								</view>
								<view class="colorfff btn bgred font24"  v-if="item.status==2">
								   停止
								</view>
								<view class="colorfff btn sysBack font24"  v-if="item.status==3">
									行驶
								</view>
								<view class="fwbold font28 ">{{item.number}}</view>
							</view>
							<view class="font24 color999 mt12">{{item.type}}</view>
							<view class="font24 color999 mt4">里程：{{item.mileage}}</view>
						</view>
					</view>
				</view>
			
			</view>
		</view>
	    <!--车辆列表-->
		<view class="mt52 containitem "  v-if="status==1">
			<view class="fwbold font32">车辆列表</view>
			<view class="mt20 containitem1 lightgreyBack">
				<view class="searchbox1 " v-for="(item,index) in list2" :key="index">
					<view class="searchbox1item flexbox alignitem"  @click="todetail">
						<view class="searchbox1itemleft">
							<image :src="item.src" mode="aspectFit"></image>
						</view>
						<view class="searchbox1itemright" :class="list2.length-1==index ?'':'lightgreyborder'">
							<view class="flexbox alignitem">
								<view class="colorfff btn bg999 font24" v-if="item.status==1">
									离线
								</view>
								<view class="colorfff btn bgred font24"  v-if="item.status==2">
								   停止
								</view>
								<view class="colorfff btn sysBack font24"  v-if="item.status==3">
									行驶
								</view>
								<view class="fwbold font28 ">{{item.number}}</view>
							</view>
							<view class="font24 color999 mt12">{{item.type}}</view>
							<view class="font24 color999 mt4">里程：{{item.mileage}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="mt52 containitem "  v-if="status==3">
			<view class="fwbold font32">查询结果</view>
			<view class="mt20 containitem1 lightgreyBack">
				<view class="searchbox1 " v-for="(item,index) in list3" :key="index">
					<view class="searchbox1item flexbox alignitem" @click="todetail">
						<view class="searchbox1itemleft">
							<image :src="item.src" mode="aspectFit"></image>
						</view>
						<view class="searchbox1itemright" :class="list3.length-1==index ?'':'lightgreyborder'">
							<view class="flexbox alignitem">
								<view class="colorfff btn bg999 font24" v-if="item.status==1">
									离线
								</view>
								<view class="colorfff btn bgred font24"  v-if="item.status==2">
								   停止
								</view>
								<view class="colorfff btn sysBack font24"  v-if="item.status==3">
									行驶
								</view>
								<view class="fwbold font28 ">{{item.number}}</view>
							</view>
							<view class="font24 color999 mt12">{{item.type}}</view>
							<view class="font24 color999 mt4">里程：{{item.mileage}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//status=2点击搜索，status=3
				status:1,
				//搜索框
				inputvalue:'',
				//我的搜索
				list:[
				{
					src:'../../static/image/Schedule.png',
					//状态1离线，2停止，3行驶
					status:1,
					//车牌号
					number:'鲁U67890',
					type:'类型：清运/可回收垃圾/4吨压缩车',
					mileage:'12345km'
					
				},
				{
					src:'../../static/image/Schedule.png',
					//状态
					status:2,
					//车牌号
					number:'鲁U67890',
					type:'类型：清运/可回收垃圾/4吨压缩车',
					mileage:'12345km'
					
				}
				],
				//车辆列表
				list2:[
					{
						src:'../../static/image/Schedule.png',
						//状态1离线，2停止，3行驶
						status:1,
						//车牌号
						number:'鲁U67890',
						type:'类型：清运/可回收垃圾/4吨压缩车',
						mileage:'12345km'
						
					},
					{
						src:'../../static/image/Schedule.png',
						//状态
						status:2,
						//车牌号
						number:'鲁U67890',
						type:'类型：清运/可回收垃圾/4吨压缩车',
						mileage:'12345km'
						
					},
					{
						src:'../../static/image/Schedule.png',
						//状态
						status:3,
						//车牌号
						number:'鲁U67890',
						type:'类型：清运/可回收垃圾/4吨压缩车',
						mileage:'12345km'
						
					},
					{
						src:'../../static/image/Schedule.png',
						//状态
						status:1,
						//车牌号
						number:'鲁U67890',
						type:'类型：清运/可回收垃圾/4吨压缩车',
						mileage:'12345km'
						
					},
				],
				//车辆列表
				list3:[
					{
						src:'../../static/image/Schedule.png',
						//状态1离线，2停止，3行驶
						status:1,
						//车牌号
						number:'鲁U67890',
						type:'类型：清运/可回收垃圾/4吨压缩车',
						mileage:'12345km'
						
					},
				]
			};
		},
		methods:{
			//当键盘输入时，触发input事件，
			input(){
				//搜索框不为空
				if(this.inputvalue!=''){
				//显示搜索界面
					this.status=2
				}else{
				//显示当前界面
					this.status=1
				}
			},
			//键盘点击回车
			doSearch(){
				//显示搜索结果
				this.status=3
			},
			
			
			todetail(){
				uni.navigateTo({
					url:'/pages/vehicles/detail'
				})
			}
		}
	}
</script>

<style lang="scss">
.bg999{
	background-color: #999999;
}
.containitem1{
	border-radius: 16upx;
	padding:0upx  32upx;
}
.bgred{
	background-color: #EE0101;
}
	.colorfff{
		color: #FFFFFF;
	}
.alignitem{
		align-items: center;
}
.paddingbox{
	padding: 16upx 32upx;
}
.searchbox{
	padding: 20upx 32upx;
	border-radius: 8upx;
	.inputclass{
width: 600upx;
	}
}
.mt48{
	margin-top: 48upx;
}
.mt20{
	margin-top: 20upx;
}
.containitem{
			border-radius: 16upx;
	.searchbox1{
		padding:0upx  0upx;
		.searchbox1item{
			.searchbox1itemleft{
				// background-color: red;
				border-radius: 24upx;
				padding: 25upx 0upx;
				width: 160upx;
				height: 120upx;
				image{
					border-radius: 24upx;
					width: 160upx;
					height: 120upx;
				}
			}
			.searchbox1itemright{
				padding: 25upx 0upx;
				margin-left: 24upx;
				.mt4{
					margin-top: 4upx;
				}
				.btn{
					padding: 6upx 8upx;
					border-radius: 4upx;
					margin-right: 16upx;
				}
			}
		}
	}
}
.mt52{
	margin-top: 52upx;
}
</style>

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

uniapp input 双向绑定 清空
carbonzhao的专栏
10-27 1万+
<input class="value-lable big-width" data-id="code" key="code" type="text" :value="stepData.code" placeholder="请输入" @blur="textFieldInputed" /> 代码如上，同学们注意观察，input动态绑定了:value来显示默认值，当你将，当你在textFieldInputed 方法内监听输入的文字是否有效时，就会出现问题。 如果有效，则输入的文本允许显示出来，.
Element UI 输入框输入中文按回车自动触发事件？一步步排查问题并解决
最新发布
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
02-19 919
通过逐步排查和分析，我们成功解决了 Element UI 输入框按回车时自动触发表单提交的问题。最终，通过阻止表单的默认提交行为，确保了用户体验的流畅性。上监听了回车键的事件，但是当回车键被按下时，它依然会触发表单提交。组件时特别常见，尤其是在用户输入中文时，按下回车键意外触发了不该执行的操作。然而，问题出现在中文输入时，按回车键不仅会触发。下面我将一步步排查这个问题，并给出解决方案，帮助大家避免这种困扰。，从而正确触发搜索操作，避免了回车键误触发提交的问题。事件被触发，甚至会提交表单，给用户带来困扰。
uniapp中uview组件库的Input 输入框 的使用方法
热门推荐
精通前端技术，了解后端接口
01-02 1万+
去除fixedautosize字段此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。应该在u-form中嵌套，再嵌套u-input去实现。注意：由于在nvue下，u-input名称被uni-app官方占用，在nvue页面中请使用u--input名称，在vue页面中使用u--input或者u-input均可。
uniapp 微信小程序 input详解 带小数点的input、可查看密码的输入框input
maoge_666的博客
07-21 2209
uniapp 微信小程序 input详解 带小数点的input、可查看密码的输入框input
uniapp-input()搜索框实现回车搜索
low666的博客
05-22 3155
uniapp-input()搜索框实现回车搜索
uniapp input框实现回车搜索事件
ttxzq88888的博客
11-09 9089
uni-app是基于vue的，所以在一开始要实现按下键盘enter键，使用如下方法并不起作用： <input type="search" @keydown.enter="doSearch"> 生成小程序后，由于uni-app是运行在手机端，没有键盘事件，所以不能够支持按键修饰符。改用下面的方法，方可解决： <input confirm-type="search" @confirm="doSearch"> ...
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
uniapp中input回车触发事件
05-11
在 `uniapp` 中，可以使用 `@confirm` 或 `@search` 事件来监听 `input` 组件的回车操作。 例如： ```html <input type="text" @confirm="handleConfirm" placeholder="请输入内容" /> export default { ...
jQuery实现给input绑定回车事件的方法
01-19
本文实例讲述了jQuery实现给input绑定回车事件的方法。分享给大家供大家参考，具体如下： [removed][removed] [removed] $(function(){ $('#dataInput').bind('keypress',function(event){ if(event.keyCode == ...
uni-app:各种事件（点击事件、回车事件...）（获取参数）
weixin_46001736的博客
07-20 1万+
uni-app:各种事件（点击事件、回车事件...）（获取参数）
uni-app：uni-search-bar组件的@input事件
听海边涛声
04-22 817
uni-app：uni-search-bar组件的@input事件
uniapp input的触发事件
书山有路_邓
12-19 1657
在uniapp中，input@input触发条件：用户输入时触发。用法：绑定输入事件，常用于获取输入框的值。示例：触发条件：输入框获得焦点时触发。用法：在输入框获得焦点时执行某些操作，如改变样式或显示提示。示例：触发条件：输入框失去焦点时触发。用法：在输入框失去焦点时执行某些操作，常用于校验输入内容等。示例：触发条件：键盘确认键（如回车键）被按下时触发。用法：通常用于提交表单或执行特定操作。
uniapp中input输入使用@input事件来控制输入框的值，不起作用
cc1511599982的博客
07-19 3160
使用uniapp开发小程序中，使用input事件来控制输入框值，发现直接赋值不起作用，使用$nextTick就可以了。
UNI-APP_uni-app input监听回车键
小歪博客
12-10 1万+
uni-app是基于vue的，所以，在一开始要实现按下键盘的enter键，使用了如下的方法： <input type="search" @keydown.enter="doSearch"> 生成小程序后，发现并没有用，一番百度，才知道uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。改用下面的方法，完美解决： <input confirm-type="search" @confirm="doSearch"> ...
uniapp中@input输入事件在修改值只有第一次有效的问题解决
02-18 843
在uniapp中使用输入框，要求输入不超过7个字，所以需要监听输入事件，当每次输入文字的时候，就把输入的值截断，取前7个值。但是在input事件中，重新赋值的值发生了变化，但是页面上的还是没有变，只有第一次的时候，才会变！这就很神奇了，所以就是当绑定的值是空的时候，才会发生页面更新！并且需要设置延时执行赋值。需要将值线设置为空，然后再通过setTimeout来设置新值，这样就可以了。
uniapp input框监听回车搜索事件效果demo（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-07 1690
uniapp input框监听回车搜索事件效果
【uni-app】input组件 @input事件(实时监听输入)传参问题
得意小门生的博客
12-21 1万+
@input事件 ，当键盘输入时，触发input事件，event.detail = {value} <input class="uni-input" @input="onKeyInput()" /> 场景 @input事件想要传递一个参数到方法中 但是同时还要保留原来返回的event 解决方法：$event @input="onKeyInput($event,123)" 运用 效果图： <view class="item" v-for="(item,index) in Pic.
uniapp u--input实现select下拉列表 input点击事件
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-27 5594
uView组价没有现成的select组件，通过input+Action sheet结合实现。我们需要点击整块input输入框，不仅仅是右侧icon。实现思路：外层套一层@click点击事件；并input设置pointer-events:none
基于uniapp的聊天系统，在H5端实现按下回车键即发送消息
Boo_crob的博客
05-12 3654
在uniapp框架中很少用到键盘回车键发送，但有时候也会使用。这次我的uniapp需要打包H5版本，就会用到键盘回车方便一点。 1.在对应的样式标签中写一个 键盘发送 的方法confirm-type=“send” @confirm="doSend" //这里的e指的键盘事件传递的参数,text是绑定的输入框的内容 doSend(e, text) { console.log(text); if (e.ctrlKey && e.keyCode === 13) { //用户点击了ctr.
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值