uniapp自定义的键盘输入

最新推荐文章于 2025-01-03 15:43:48 发布
最新推荐文章于 2025-01-03 15:43:48 发布
阅读量2k 收藏 4
点赞数 5
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hcy5201314521/article/details/134892459
版权

参考这个链接：uniapp 自定义数字键盘_uniapp 数字键盘-CSDN博客

这个也可以看看：uniapp 手机端时禁止输入框弹出键盘，使用自定义键盘_uniapp禁用手机键盘-CSDN博客

效果图：

代码如下：

<template>
	<view style="background-color: white; min-height: 1200rpx;">
		<view
			style="width: 100%; height: 100rpx; display: flex; justify-content: center; align-items: center; background-color: #4CAF50;">
			<view style="color: white; font-size: 40rpx; font-weight: 600;">会员登录</view>
		</view>
		<view style="width: 100%; height: 100rpx; z-index: 99; margin-top: 50rpx;">
			<view class="" style="display: flex; justify-content: center; align-items: center;">
				<input v-model="clockweightdata" placeholder="请输入会员手机号" type="text" :disabled="showKeyboard" @click="showKeyboard = true"
					style="width: 700rpx; height: 80rpx; border: 3rpx solid #4CAF50; margin: 0 20rpx; border-radius: 30rpx; text-align: center;">
			</view>
		</view>
		<!-- 增加第二个输入框，用于输入密码 -->
		<view style="width: 100%; height: 100rpx; z-index: 99; margin-top: 50rpx;">
			<view class="" style="display: flex; justify-content: center; align-items: center;">
				<input v-model="passwordData" placeholder="请输入会员密码" type="password" :disabled="showKeyboard" @click="showKeyboard = true"
					style="width: 700rpx; height: 80rpx; border: 3rpx solid #4CAF50; margin: 0 20rpx; border-radius: 30rpx; text-align: center;">
			</view>
		</view>
		<view
			style="width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; overflow: auto; margin-top: 200rpx;"
			v-if="showKeyboard">
			<!-- 键盘数字按钮 -->
			<view class="but" v-for="item in 12" :key="item" @click="keyboard(item)">
				<label>{{ item === 10 ? '.' : item === 11 ? '0' : item === 12 ? '' : item }}</label>
			</view>
			<!-- 操作按钮 -->
			<view class="but" @click="deleteButtonClicked" style="background-color: #ff7c70;">删除</view>
			<view class="but" @click="clearButtonClicked" style="background-color: #ff7c70;">清空</view>
			<view class="but" @click="confirm" style="background-color: #4CAF50;">确定</view>
		</view>
		<view class="list recommend" v-else>
			<view style="padding-top: 10px;"></view>
			<view class="con"
				@click="toUrl(`/pages/store/teacher/detail?id=${technician.id}&categoryId=${getType(technician.categoryId)}`)">
				<image src="../../static/logo.png" mode="heightFix" class="img"></image>
				<view class="right">
					<view class="title">名字</view>
					<view class="intro">注册地址：</view>
					<view class="" style="text-align: right; padding-top: 5px; padding-right: 10%;">
						<button type="primary" size="mini"> 点击查看预约 </button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clockweightdata: '', // 会员手机号
				passwordData: '', // 会员密码
				showKeyboard: true // 初始状态下显示键盘
			};
		},
		onReady() {},
		onLoad() {},
		methods: {
			// 自定义键盘事件
			keyboard(item) {
				// 点号
				if (item === 10 && this.clockweightdata !== '') {
					const x = String(this.clockweightdata).indexOf('.') + 1;
					if (x !== 0) {
						return;
					}
					const num = this.clockweightdata;
					const key = '.';
					this.clockweightdata = num + key;
					return;
				}
				// 1-9
				const x = String(this.clockweightdata).indexOf('.') + 1;
				const y = String(this.clockweightdata).length - x;
				if (x !== 0 && y >= 2) {
					return;
				}
				if (item <= 9) {
					const num = this.clockweightdata;
					const key = String(item);
					this.clockweightdata = num + key;
					return;
				}
				// 0
				if (item === 11 && this.clockweightdata !== '') {
					const num = this.clockweightdata;
					const key = '0';
					this.clockweightdata = num + key;
				}
			},
			// 删除
			deleteButtonClicked() {
				if (this.clockweightdata.length > 0) {
					this.clockweightdata = this.clockweightdata.slice(0, -1);
				}
			},
			//清空
			clearButtonClicked() {
				this.clockweightdata = '';
			},
			// 确定
			confirm() {
				// 处理确定按钮的点击事件，您可以在这里执行您的操作
				// 例如，提交数据或执行其他操作
				if (this.clockweightdata.trim() === '') {
					// 输入框为提示用户输入内容
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					});
				} else {
					this.showKeyboard = false;
					console.log('点击了确定按钮');
				}

			},

			toUrl(url) {
				// 实现跳转逻辑，你可以根据自己的需求来实现
				console.log('跳转到', url);
			},
			getType(categoryId) {
				// 实现获取类型逻辑，你可以根据自己的需求来实现
				return categoryId;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.but {
		width: 30%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
		border: 2rpx solid #fff;
	}

	.list,
	.recommend {
		margin-top: 40rpx;

		.con {
			background-color: white;
			display: flex;
			justify-content: space-between;
			border-radius: 10px;
			margin: 0 36rpx 20rpx 36rpx;
			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);

			.img {
				width: 90px;
				height: 90px;
				border-top-left-radius: 20rpx;
				border-bottom-left-radius: 20rpx;
			}

			.right {
				position: relative;
				width: calc(100% - 110px);

				uni-view {
					font-size: 24rpx;
					color: #575858;
				}

				.title {
					color: #101010;
					font-size: 28rpx;
					font-weight: bold;
					margin-top: 10rpx;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}
		}
	}
</style>

又重新加了个输入框的，加了一些逻辑

效果如下：

代码如下：

<template>
	<view style="background-color: white; min-height: 1200rpx;">
		<view
			style="width: 100%; height: 100rpx; display: flex; justify-content: center; align-items: center; background-color: #4CAF50;">
			<view style="color: white; font-size: 40rpx; font-weight: 600;">会员登录</view>
		</view>
		<view style="width: 100%; height: 100rpx; z-index: 99; margin-top: 50rpx;">
			<view class="" style="display: flex; justify-content: center; align-items: center;">
				<!-- 会员手机号输入框，添加点击事件来设置激活状态 -->
				<input v-model="clockweightdata" placeholder="请输入会员手机号" autocomplete="off-new" type="text" @click="setActiveInput('phone')"
					style="width: 700rpx; height: 80rpx; border: 3rpx solid #4CAF50; margin: 0 20rpx; border-radius: 30rpx; text-align: center;">
			</view>
		</view>
		<!-- 增加第二个输入框，用于输入密码 -->
		<view style="width: 100%; height: 100rpx; z-index: 99; margin-top: 50rpx;">
			<view class="" style="display: flex; justify-content: center; align-items: center;">
				<!-- 会员密码输入框，添加点击事件来设置激活状态 -->
				<input v-model="passwordData" placeholder="请输入会员密码" autocomplete="new-text" type="password" @click="setActiveInput('password')"
					style="width: 700rpx; height: 80rpx; border: 3rpx solid #4CAF50; margin: 0 20rpx; border-radius: 30rpx; text-align: center;">
			</view>
		</view>
		<view
			style="width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; overflow: auto; margin-top: 100rpx;"
			v-if="showKeyboard">
			<!-- 键盘数字按钮 -->
			<view class="but" v-for="item in 12" :key="item" @click="keyboard(item)">
				<label>{{ item === 10 ? '.' : item === 11 ? '0' : item === 12 ? '' : item }}</label>
			</view>
			<!-- 操作按钮 -->
			<view class="but" @click="deleteButtonClicked" style="background-color: #ff7c70;">删除</view>
			<view class="but" @click="clearButtonClicked" style="background-color: #ff7c70;">清空</view>
			<view class="but" @click="confirm" style="background-color: #4CAF50;">确定</view>
		</view>
		<view class="list recommend" v-else>
			<view style="padding-top: 10px;"></view>
			<view class="con"
				@click="toUrl(`/pages/store/teacher/detail?id=${technician.id}&categoryId=${getType(technician.categoryId)}`)">
				<image src="../../static/logo.png" mode="heightFix" class="img"></image>
				<view class="right">
					<view class="title">名字</view>
					<view class="intro">注册地址：</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clockweightdata: '', // 会员手机号
				passwordData: '', // 会员密码
				activeInput: 'phone', // 当前激活的输入框
				showKeyboard: true // 键盘的显示状态
			};
		},
		created(){
			this.clockweightdata = '';
			this.passwordData = '';
		},
		onReady() {},
		onLoad() {},
		
		methods: {
			// 设置当前激活的输入框
			setActiveInput(inputType) {
				this.activeInput = inputType;
				this.showKeyboard = true; // 无论何时点击输入框，都显示键盘
			},

			// 自定义键盘事件
			 keyboard(item) {
			        // 处理数字按钮的输入 (1-9 和 0)
			        if (item >= 1 && item <= 9) { // 对应数字 1-9
			            if (this.activeInput === 'phone') {
			                this.clockweightdata += item.toString(); // 向电话号码添加数字
			            } else if (this.activeInput === 'password') {
			                this.passwordData += item.toString(); // 向密码添加数字
			            }
			        } else if (item === 11) { // 对应数字 0
			            if (this.activeInput === 'phone') {
			                this.clockweightdata += '0'; // 向电话号码添加0
			            } else if (this.activeInput === 'password') {
			                this.passwordData += '0'; // 向密码添加0
			            }
			        } else if (item === 10) { // 对应点号 '.'
			            // 仅电话号码输入框处理点号
			            if (this.activeInput === 'phone' && this.clockweightdata.indexOf('.') === -1) {
			                this.clockweightdata += '.'; // 在电话号码中添加点号，但仅当它尚不存在时
			            }
			        }
			    },
			// 删除和清空操作也需要修改，以处理当前激活的输入框
			deleteButtonClicked() {
				if (this.activeInput === 'phone' && this.clockweightdata.length > 0) {
					this.clockweightdata = this.clockweightdata.slice(0, -1);
				} else if (this.activeInput === 'password' && this.passwordData.length > 0) {
					this.passwordData = this.passwordData.slice(0, -1);
				}
			},
			//清空
			clearButtonClicked() {
				if (this.activeInput === 'phone') {
					this.clockweightdata = '';
				} else {
					this.passwordData = '';
				}
			},
			// 确定
			confirm() {
				// 处理确定按钮的点击事件，您可以在这里执行您的操作
				// 例如，提交数据或执行其他操作
				if (this.clockweightdata.trim() === '') {
					// 输入框为提示用户输入内容
					uni.showToast({
						title: '请输入会员手机号',
						icon: 'none'
					});
				} else if(this.passwordData.trim() === ''){
					// 输入框为提示用户输入内容
					uni.showToast({
						title: '请输入会员密码',
						icon: 'none'
					});
				}else{
					this.showKeyboard = false;
					console.log('点击了确定按钮');
				}

			},

			toUrl(url) {
				// 实现跳转逻辑，你可以根据自己的需求来实现
				console.log('跳转到', url);
			},
			getType(categoryId) {
				// 实现获取类型逻辑，你可以根据自己的需求来实现
				return categoryId;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.but {
		width: 30%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
		border: 2rpx solid #fff;
	}

	.list,
	.recommend {
		margin-top: 40rpx;

		.con {
			background-color: white;
			display: flex;
			justify-content: space-between;
			border-radius: 10px;
			margin: 0 36rpx 20rpx 36rpx;
			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);

			.img {
				width: 90px;
				height: 90px;
				border-top-left-radius: 20rpx;
				border-bottom-left-radius: 20rpx;
			}

			.right {
				position: relative;
				width: calc(100% - 110px);

				uni-view {
					font-size: 24rpx;
					color: #575858;
				}

				.title {
					color: #101010;
					font-size: 28rpx;
					font-weight: bold;
					margin-top: 10rpx;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}
		}
	}
</style>

Ya0Chen
关注
uniapp 自定义键盘 基于uni-popup
学吧
03-04 1007
【代码】uniapp 自定义键盘 基于uni-popup。
uni-app:自定义键盘
最新发布
m0_56600567的博客
03-28 1135
使用示例
uniapp 自定义数字键盘
weixin_46997610的博客
07-05 1823
uniapp 自定义 数字键盘
uniapp小程序、uniappH5自定义快捷输入键盘
mengmeng12138的博客
04-08 1535
此键盘根据其他大佬写好的自定义键盘的基础上，按本人所需需求进行修改而来。
uniapp 安卓端 自定义键盘 系统软键盘闪出问题
weixin_43886375的博客
07-07 734
如果输入框被遮挡，先获取键盘高度,代码如下。现在应该滚动固定位置 代码请参考。
uniapp自建数字键盘
qq_40110189的博客
07-03 6194
uniapp自建数字键盘插件
自定义键盘 身份证键盘
04-13
本代码为自定义键盘，为身份证输入框或者数字输入框试用，如果需要定制其他键盘替换xml文件即可，导入项目可查看具体应用
uniapp自定义键盘
08-16
在uniapp中，可以通过自定义组件实现自定义键盘功能。引用提到了一个自定义万能键盘组件（数字键盘、身份证键盘、带小数点数字键盘、车牌键盘），可以根据不同的需求选择不同类型的键盘。同时，引用也提到了如何使用...
uniapp 自定义键盘
09-06
Uniapp 提供了自定义键盘的功能，可以通过在页面中使用 `<textarea>` 或 `<input>` 标签来创建输入框，并利用 `@focus` 事件绑定自定义的键盘组件。 以下是一个示例代码： ```vue ...
uniapp自定义密码输入键盘-数字键盘效果demoUI方法一（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-09 2173
uniapp自定义密码输入键盘-数字键盘效果demoUI方法一
uniapp+vue3 自定义数字键盘
mmmm00_的博客
10-18 441
1.首先，你需要创建一个数字键盘的组件。可以在components文件夹下新建一个文件。
uniapp实现一个键盘功能
echo_Ae的博客
07-06 783
因为公司需要，所以我....
uniapp 自定义类微信支付键盘 （微信小程序)
zjqjy0911的博客
01-03 769
效果图 更新于 25/1/10。
uniapp 手机端时禁止输入框弹出键盘，使用自定义键盘
热门推荐
全易
12-10 1万+
<template> <view class="captch"> <view style=""> <view class="title-h1">短信验证码</view> <view class="title-h2"> <view>已向您尾号 {{ tail }} 的手机发送验证码<...
【uniapp前端组件】自定义万能键盘（数字键盘、带小数点数字键盘、身份证键盘、车牌号键盘）
只会瞎搞
09-03 7286
uniapp自定义万能键盘（数字键盘、带小数点数字键盘、身份证键盘、车牌号键盘） 简介 万能键盘是一款集数字键盘、带小数点的数字键盘、身份证键盘、车牌号键盘为一身的自定义键盘。 效果图 属性 属性 类型 可为空 备注 keyboardtype String 是 ‘number’:数字键盘（默认），‘digit’:带小数点数字键盘，‘idcard’:身份证键盘，‘car’:车牌键盘 defaultValue String 否 初始化键盘值，默认为’’,每次回调重新赋值 new
uni-app 自定义支付密码键盘
qq_36529240的博客
06-28 625
1.新建最贱 payKeyboard .vue。
【uniapp】uniapp实现input输入显示数字键盘：
SunPeng的博客
10-29 5239
【uniapp】uniapp实现input输入显示数字键盘：
记uniapp 自定义input 获得焦点键盘弹起时 input 输入框 跟随页面滚动问题
weixin_43073383的博客
11-22 2929
前言：最近在做im聊天，使用uniapp 的scroll-view 写list 使用scroll-into-view 做锚点滚动，需求是聊天时获得焦点，要和微信那样只滚动聊天记录，而不是使用input 的adjust-position 自动上推页面；使用uni.onKeyboardHeightChange监听键盘高度变化 ；用fiexd 定位input 的位置，但是在ios 运行，input 会莫名其妙的滚动页面，似乎还不是跟随scroll-view滚动，具体没有深入探究 解决此问题使用@touchmov
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值