[vuetify] 失去焦点时将文本框格式化

Vue组件：失去焦点时自动格式化时间

最新推荐文章于 2025-02-21 11:44:24 发布

原创最新推荐文章于 2025-02-21 11:44:24 发布 · 692 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

学习笔记专栏收录该内容

70 篇文章

订阅专栏

这个博客展示了如何在Vue中使用v-model和@blur事件处理函数来格式化用户输入的时间，确保时间始终以HH:mm的格式显示。通过正则表达式验证输入并用padStart方法填充不足两位的小时和分钟。

失去焦点时格式化时间到HH:mm格式。

<template>
	<v-text-field
		label="Clock Out at"
		v-model="clockOutAt"
		@blur="formatTime"
	/>
</template>
<script>
const TIME_REGEX = /^(\d+):(\d+)$/;
export default {
	data(){
		return {
			clockOutAt: null
		}
	},
	methods: {
		formatTime(e) {
			let el = e.target;
			let v = el.value;
			let match = v.match(TIME_REGEX);
			if (match) {
				let h = Number(match[1]) % 24;
				let m = Number(match[2]) % 60;
				let hh = h.toString().padStart(2, "0");
				let mm = m.toString().padStart(2, "0");
					el.value = hh + ":" + mm;
					el.dispatchEvent(new Event("input"));
				}
			}
		}
	}
}
</script>