时间戳

首页 > 解决方案 > 如何在小时：分钟内进行简单的输入？

vue.js - 如何在小时：分钟内进行简单的输入？

问题描述

我正在努力创建一个非常简单的用户输入字段，只允许用户以这种格式输入小时：分钟：“00:00”。这个想法是只有文本输入，没有日期选择器、日历、时钟、上午/下午等。

我不知道我是否应该查看正则表达式，因为我希望用户输入采用上面指定的格式，并在输入时进行验证。

我尝试过使用input type="time"，但它在平台和浏览器之间的行为不同（在 Firefox 中添加 AM/PM，在 Android 上显示时钟选择器等）我尝试过类似的东西

<v-text-field oninput="this.value = this.value.replace(/[^0-9]/g, '').replace([0-1]{1}[0-9]{1}|20|21|22|23):[0-5]{1}[0-9]{1});"></v-text-field>，但我无法让它工作。有任何想法吗？提前致谢！

标签： vue.jsvuexvuetify.js

解决方案

您需要使用mask正确的格式输入文本字段值。
对于 Vue.js，有一个简单而强大的掩码组件 - https://vuejs-tips.github.io/vue-the-mask/

所以，你应该：

  1. 安装组件
    npm i -S vue-the-mask
  2. 在组件内部本地导入它 
import {TheMask} from 'vue-the-mask'
export default {
  components: {TheMask}
}
  1. 与适当的面具一起使用
<the-mask :mask="['##:##']" />

Codesandbox##:##示例链接 - https://codesandbox.io/s/pedantic-dijkstra-np411

推荐阅读