vue中实现纯数字键盘

已于 2023-12-01 18:37:45 修改
阅读量1.3k 收藏 10
点赞数 9
分类专栏： vue 文章标签： vue.js javascript elementui
于 2023-12-01 18:37:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61911999/article/details/134740337
版权

一、完整 代码展示

<template>
	<div class="login">
		<div class="login-content">
			<img class="img" src="../../assets/image/loginPhone.png" />
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>手机号登录</span>
				</div>
				<div class="text-content">
					<el-form :model="ruleForm" label-width="80px">
						<el-form-item label="手机号" class="keyboard-wrapper">
							<el-input placeholder="请输入手机号" v-model.sync="ruleForm.tel" clearable
								@focus="viewShow('tel')" onfocus="this.blur()" @input="handleInputTel" maxlength="11" show-word-limit>
							</el-input>
						</el-form-item>
						<el-form-item label="验证码" class="keyboard-wrapper">
							<el-input placeholder="请输入验证码" v-model.sync="ruleForm.code" @focus="viewShow('code')"
								onfocus="this.blur()" @input="handleInput" clearable>
								<template slot="append">
									<el-button style="font-size: 22px;" :disabled="Boolean(timer)" @click="getCode">
										{{ timer ? time + "S" : "获取" }}
									</el-button>
								</template>
							</el-input>
							<!-- 手机号键盘 -->
							<div class="keyboard" v-if="telShow">
								<div class="num">
									<table>
										<tr>
											<td @click="changeTel(1)" :class="[tel === 1 ? 'tel' : '']">1</td>
											<td @click="changeTel(2)" :class="[tel === 2 ? 'tel' : '']">2</td>
											<td @click="changeTel(3)" :class="[tel === 3 ? 'tel' : '']">3</td>
											<td rowspan="2" class="delTel" @click="delTel">×</td>
										</tr>
										<tr>
											<td @click="changeTel(4)" :class="[tel === 4 ? 'tel' : '']">4</td>
											<td @click="changeTel(5)" :class="[tel === 5 ? 'tel' : '']">5</td>
											<td @click="changeTel(6)" :class="[tel === 6 ? 'tel' : '']">6</td>
										</tr>
										<tr>
											<td @click="changeTel(7)" :class="[tel === 7 ? 'tel' : '']">7</td>
											<td @click="changeTel(8)" :class="[tel === 8 ? 'tel' : '']">8</td>
											<td @click="changeTel(9)" :class="[tel === 9 ? 'tel' : '']">9</td>
											<td rowspan="2" class="comfirmTel" @click="comfirmTel">确定</td>
										</tr>
										<tr>
											<td @click="changeTel(0)" colspan="3" :class="[tel === 0 ? 'tel' : '']">0</td>
										</tr>
									</table>
								</div>
							</div>
							<!-- 验证码鍵盤 -->
							<div class="keyboard" v-if="show">
								<div class="num">
									<table>
										<tr>
											<td @click="change(1)" :class="[code === 1 ? 'code' : '']">1</td>
											<td @click="change(2)" :class="[code === 2 ? 'code' : '']">2</td>
											<td @click="change(3)" :class="[code === 3 ? 'code' : '']">3</td>
											<td rowspan="2" class="del" @click="del">×</td>
										</tr>
										<tr>
											<td @click="change(4)" :class="[code === 4 ? 'code' : '']">4</td>
											<td @click="change(5)" :class="[code === 5 ? 'code' : '']">5</td>
											<td @click="change(6)" :class="[code === 6 ? 'code' : '']">6</td>
										</tr>
										<tr>
											<td @click="change(7)" :class="[code === 7 ? 'code' : '']">7</td>
											<td @click="change(8)" :class="[code === 8 ? 'code' : '']">8</td>
											<td @click="change(9)" :class="[code === 9 ? 'code' : '']">9</td>
											<td rowspan="2" class="comfirm" @click="comfirm">确定</td>
										</tr>
										<tr>
											<td @click="change(0)" colspan="3" :class="[code === 0 ? 'code' : '']">0</td>
										</tr>
									</table>
								</div>
							</div>
						</el-form-item>
					</el-form>
				</div>
			</el-card>
			<div style="text-align: center;margin-left: 10px;">
				<el-button type="primary" :loading="loading" :disabled="!ruleForm.tel || !ruleForm.code"
					@click="linkToPage">
					登录
				</el-button>
			</div>
		</div>
	</div>
</template>
<script>
	import storage from "store";
	import { useLogin, getCode } from "@/api/index.js";
	
	export default {
		data() {
			return {
				time: 60,
				ruleForm: {
					tel: "",
					code: "",
				},
				show: false,
				telShow: false,
				NUM: "",
				NUMTEL: "",
				result: [],
				resultTel: [],
				tel: '',
				code: '',
				timer: null,
				loading: false,
			};
		},
		
		computed: {
			// 统计数量
			num: function() {
				return this.result.join("");
			},
			// 统计数量
			numtel: function() {
				return this.resultTel.join("");
			},
		},

		methods: {
			//登录
			linkToPage() {
				this.loading = true;
				useLogin(this.ruleForm).then((res) => {
					if (res.code == 200) {
						storage.set("Access-Token", res.data.token); // 正常请求token
						storage.set("User-Info", JSON.stringify(res.data)); // 正常请求token
						setTimeout(() => {
							this.$router.push("/index")
						}, 2000);
					} else {
						this.$message.error(res.msg);
					}
				}).finally(() => {
					this.loading = false;
				});
			},
			//获取验证码
			getCode() {
				if (!this.ruleForm.tel) return;
                // 检查手机号格式是否正确
				const phoneNumberRegex = /^1[3456789]\d{9}$/;
				if (!phoneNumberRegex.test(this.ruleForm.tel)) {
				  this.$message.warning('手机号格式不正确，请重新输入！');
				  return;
				}
				getCode(this.ruleForm).then((res) => {
					if (res.code === 200) {
						this.$message.success(res.msg);
						this.timer = setInterval(() => {
							if (this.time == 0) {
								clearInterval(this.timer);
								this.timer = null;
								this.time = 60;
							} else {
								this.time--;
							}
						}, 1000);
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			
			//展示数字键盘
			viewShow(type) {
				if (type === 'tel') {
					this.telShow = !this.telShow
					this.show = false
				} else {
					this.show = !this.show
					this.telShow = false
				}
			},
			
			handleInput() {
				if (this.ruleForm.code.length >= 6) return;
			},
			//获取选中的数字 验证码
			change(val, $event) {
				//设置验证码的长度
				if (this.ruleForm.code.length >= 6) return;
				this.ruleForm.code += String(val)
				if (this.result.length === 0) {
					return false;
				} else {
					this.result.push(this.ruleForm.code);
					this.NUM = this.result.join("");
				}
			},
			//验证码刪除
			del() {
				this.ruleForm.code = this.ruleForm.code.slice(0, -1)
				this.NUM = this.result.join("");
				this.$emit("del", this.NUM);
			},
			//验证码確認按鈕
			comfirm() {
				this.$emit("comfirm", this.NUM);
				this.show = false;
			},

			//获取选中的数字 手机号
			changeTel(val, $event) {
				//设置验证码的长度
				if (this.ruleForm.tel.length >= 11) return;
				this.ruleForm.tel += String(val)
				if (this.resultTel.length === 0) {
					return false;
				} else {
					this.resultTel.push(this.ruleForm.tel);
					this.NUMTEL = this.resultTel.join("");
				}
			},
			handleInputTel() {
				if (this.ruleForm.tel.length >= 11) return;
			},
			//刪除 手机号
			delTel() {
				this.ruleForm.tel = this.ruleForm.tel.slice(0, -1)
				this.NUMTEL = this.resultTel.join("");
				this.$emit("delTel", this.NUMTEL);
			},
			//確認按鈕 手机号
			comfirmTel() {
				this.$emit("comfirmTel", this.NUMTEL);
				this.telShow = false;
			},
			
		},
	};
</script>

二、方法详解

1、数据详解：

  • ruleForm对象包含了手机号和验证码两个属性；
  • show和telShow分别表示验证码键盘和手机号键盘是否显示状态；
  • NUM和NUMTEL表示存储选中的验证码和手机号；
  • result和resultTel表示用于存储选中的验证码和手机号的数组；
  • tel和code表示当前选中的手机号和验证码的数字；
  • timer用于控制获取验证码按钮的倒计时；
  • loading表示登录按钮的加载状态。

2、计算属性详解：

  • num：用于将选中的验证码数字拼接为字符串；
  • numtel：用于将选中的手机号数字拼接为字符串。

3、方法详解：

  • viewShow方法用于切换显示手机号键盘或验证码键盘。
  • handleInput方法用于限制验证码输入框的长度不超过6位。
  • change方法用于获取选中的验证码数字，并将其拼接到ruleForm.code中。
  • del方法用于删除最后一个输入的验证码数字。
  • comfirm方法用于确认验证码的输入，同时关闭验证码键盘。
  • 手机号键盘相关方法同验证码键盘类似。

4、方法注释：

 push()：用于向数组末尾添加一个或多个元素 

 slice()：方法接收两个参数起始位置和结束位置（不含结束位置）

 this.ruleForm.tel.slice(0, -1)表示获取this.ruleForm.tel的子数组，从索引0开始，到倒数第一个元素（不含倒数第一个元素）结束。简单来说，它删除了this.ruleForm.tel的最后一个字符，并将剩余的部分赋值给this.ruleForm.tel。

三、Css样式 

<style lang="less" scoped>
	.login {
		padding-top: 80px;
	}
	.login-title {
		position: fixed;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 80px);
		height: 160px;
		padding: 0 40px;
		background-color: @theme-color;
		color: #fff;
		font-size: 38px;
		font-weight: bold;
	}
	.login-content {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 200px;
	}
	.clearfix {
		text-align: center;
		color: #00aaff;
		font-size: 26px;
	}
	.box-card {
		height: 520px;
		width: 480px;
		border-radius: 20px;
	}
	.keyboard-wrapper {
		user-select: none;
		input {
			width: 100%;
			height: 50px;
			font-size: 26px;
		}
		.keyboard {
			position: fixed;
			margin-top: 10px;
			width: 60%;
			.num {
				table {
					width: 32%;
					border: 1px solid #ccc;
					border-collapse: collapse;
					background: #fff;
					td {
						height: 60px;
						vertical-align: middle;
						color: #333;
						font-size: 20px;
						border: 1px solid #ccc;
						text-align: center;
					}
					td.active {
						background: #ccc;
					}
					.del {
						background: #eee;
					}
					.comfirm {
						font-size: 16px;
						width: 80px;
						background: #62c7eb;
						color: #fff;
					}
					.delTel {
						background: #eee;
					}
					.comfirmTel {
						font-size: 16px;
						width: 80px;
						background: #118eeb;
						color: #fff;
					}
				}
			}
		}
	}
</style>

手机号数字键盘效果图

验证码数字键盘效果图

明思齐
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现移动端H5数字键盘组件使用详解
10-14
主要为大家详细介绍了vue实现移动端H5数字键盘组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用Vue自定义数字键盘组件(体验度极好)
08-28
"使用Vue自定义数字键盘组件，提高用户体验" 在 Vue 开发中，输入金额是一种常见的交互场景。然而，用原生的 input 进行金额输入体验很不好...本文详细介绍了自定义数字键盘组件的实现过程，可以作为 Vue 开发的参考。
vue自定义数字键盘
m0_53912016的博客
03-10 4317
输入框快速调出数字键盘 <input type="tel" pattern="[0-9]*">或者 <input type="num" pattern="[0-9]*"> 自定义数字键盘 封装的插件
uniapp+vue3实现数字键盘
最新发布
weixin_57986195的博客
06-14 394
本文章是uniapp+vue3实现的数字键盘，希望可以帮助到漂泊在外的程序员们！
H5+Vue2: input(number/tel)唤起数字键盘，踩坑日记
weixin_43932309的博客
02-25 3898
h5页面做一个搜索功能，且只支持数字[0-9]输入。首先，可使用成熟组件库（可使用Vant 的Field 输入框）。其次使用input type=tel，非数字的输入需处理成空字符串。最复杂的处理方式是定制一个数字键盘。
vue封装数字键盘
weixin_45843676的博客
07-11 816
vue封装数字键盘
vue3用Grid布局 写了一个数字输入小键盘
weixin_44495327的博客
07-02 620
console.log("等一个人 希望能等到 cj")
vue实现自定义身份证，数字键盘（光标，输入框，键盘）
阿铭的博客
10-29 3733
vue实现自封装身份证键盘（光标，输入框，键盘）组件介绍组件代码插入链接与图片组件使用引用使用参数介绍方法插槽 组件介绍 vue实现自封装身份证键盘（光标，输入框，键盘全手写） 组件代码 <template> <div class="myKeyboard" @click="handleFocus" @blur="handleBlur" tabindex="0"> <div class="input-container"> <!-- <d
vue引入js数字小键盘的实现代码
10-18
在Vue.js应用中，实现一个数字小键盘通常用于输入纯数字的场景，比如表单验证、支付密码等。以下是一个关于如何在Vue中引入并实现JS数字小键盘的详细步骤和知识点： 1. **组件创建**： 首先，我们需要创建一个名为...
Vue 实现拨打电话操作
01-18
1、在vue项目的index.html中添加如下代码： <meta name=”format-detection” content=”telephone=yes” /> 2、在需要调起手机拨号功能的页面，写如下函数： // 调用拨号功能 callPhone (phoneNumber) { ...
一个Vue视频媒体多段裁剪组件的实现示例
12-12
近日项目有个新需求，需要对视频或音频进行多段裁剪然后拼接。例如，一段视频长30分钟，我需要将5-10分钟、17-22分钟、24-29分钟这三段拼接到... 支持鼠标拖拽输入与键盘数字输入两种模式； 支持预览播放指定裁剪片段
wckeyboard基于vue封装的一个自定义数字键盘
08-10
wc-keyboard 基于 vue 封装的一个自定义数字键盘, 仿照大众点评闪惠买单的价格输入键盘
vue中英文切换键盘
11-19
vue中英文切换虚拟键盘键盘，直接引入可以用，使用方法 import keyborad from "@/components/vitualKeyboard/keyboard.vue"; components{ keyborad }
vue 数字软键盘 插件 封装 可拖动
奇点的博客
11-12 913
在一些没有鼠标和键盘的情况下，需要软键盘，可拖动的数字键盘
Vue结合Jquery 实现网页端数字键盘
你走过的路 风都是暖的
09-21 659
input placeholder="登录账号 / 员工编号"
【VUE/H5】H5调起数字键盘的坑，及手写移动端键盘代码
热门推荐
LuviaWu的博客
05-07 1万+
h5 调起数字键盘的坑 为了限制只能输入数字，不能输入小数点、加减号，走了敲多的弯路~~（查各种资料，然后各种测试） 现下来看看笔记： HTML5加入了新的input类型 number，这是方便数量输入的。如果是在移动端中，属性type=”number”和type=”tel”会唤起系统的数字键盘，这对于交互还是挺友好的。 一、 type="number"时 1、只允许输入数字，（兼容ios、安卓）...
前端歌谣-第一百一十课-Vue3实现简单数字键盘效果
qq_41632427的博客
02-28 602
大家好 我是歌谣 今天给大家带来vue3的功能关于键盘的实现。
自定义数字键盘（基于Vue封装）
L_Sarah的博客
07-27 1625
最近在做一个项目有个需求，点击输入框，自动调起数字键盘。 最开始一直尝试设置input的type属性，但都遇到了各种各样的问题： 1.type=number，PC和安卓都不能输入非数字字符（注意：安卓仍然可以输入+和-），最大的问题是ios可以切换到非数字键盘，但输入的非数字字符都会自动清空，因此获取不到输入的值，也就没有办法判断输入的值是数字还是非数字 2.type=tel，ios不能切换到非数字键盘，看似完美解决问题，但ios数字键盘没有小数点(.)，当需要输入金额时就不适用了 后来产品提出，为了提高用
vue 虚拟数字键盘
08-19
在你提供的引用内容中，没有提到关于Vue虚拟数字键盘的具体信息。可以根据你的描述，我可以为你提供一种实现Vue虚拟数字键盘的方法。 你可以使用Vue和一些插件来实现虚拟数字键盘。一个可行的解决方案是使用vue- #### 引用[.reference_title] - *1* *2* [vue中 虚拟键盘](https://blog.csdn.net/rikimiao/article/details/127897311)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue 虚拟数字键盘](https://blog.csdn.net/qq_38321137/article/details/119781365)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值