时间戳

首页 > 解决方案 > 为什么 type="number" 属性会破坏 Firefox 中的解析？

html - 为什么 type="number" 属性会破坏 Firefox 中的解析？

问题描述

我有一个应该只有一组字符的输入字段，我通过正则表达式解析输入值来做到这一点。只要我不添加属性 type="number"，这在 Firefox 中有效。

脚本是错误的还是可能是 vue 或 firefox 中的错误？

代码在jsFiddle

new Vue({
  el: "#app",
  data: {
    message: ""
  },
  methods: {
    mask(input) {
      const validCharsForNumberFields = /[0-9]*(,|\.)?[0-9]*/gm
      this.message = input.target.value.match(validCharsForNumberFields)[0]
    }
  }
})
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<div id="app">
  <div>
    <!-- Remove the type="number" attribute to make the parsing work in firefox -->
    <input @input="mask" v-model="message" type="number" placeholder="Try numbers">
    <p>Message is: {{ message }}</p>
  </div>
</div>

编辑：顺便说一句，这篇文章中的代码片段的行为与 jsFiddle 上的代码不同。不知道为什么。我会试着弄清楚这一点。同时，jsFiddle 版本的行为方式与在本地运行此代码的方式相同。

标签： htmlfirefoxvue.jsinputattributes

解决方案

推荐阅读