如何禁用输入类型编号上的所有点?Vue.js 2 [英] How can I disable all dot on input type number ? vue.js 2

问题描述

我的 html 代码如下:

<input type="number" v-model="quantity"/>

我的 vue 组件是这样的:

new Vue({el: '#app',数据: {数量: ''},手表: {数量 (val) {this.quantity = val.replace('.', '')}}})

演示和完整代码如下:https://jsfiddle.net/50wL7mdz/67375/

例如

我输入10.2，会自动变成102

如果我输入10..2，它不会自动成为102

所以如果有多个点，它不起作用

我该如何解决这个问题?

解决方案

因为你使用的是type="number"，浏览器在做一些内部处理，所以value输入的代码>(绑定到您的变量)是一个数字，与框中的文本不完全相同.

特别是，如果框中的文本不是有效数字，则内部值为空.当您键入一个."时，该值不会改变:10. 和 10 是相同的数值.当您键入第二个 '.' 时，该值变为无效，因此内部值为空.有点令人困惑的是，您在输入中输入的内容仍然可见，但是 没有办法得到它.

您的选择是停止使用 type="number" 在这种情况下，您的代码将按编写的方式工作(但您没有用于更改值的向上和向下箭头功能)，或者做一些棘手的事情.

更新:通过强制使用数字的规范化版本，下面的解决方案工作得相对较好.需要注意的是，每次进行更改时，光标都会移动到数字的末尾.你可以解决这个问题，但 有点复杂所以我没有在这里做.

new Vue({el: '#app',数据: {数量: ''},计算:{份数:{得到() {返回 this.quantity;},设置(val){this.quantity = '';this.$nextTick(() => {this.quantity = val.replace('.', '');});}}}})

<script src="https://unpkg.com/vue"></script><div id="应用程序"><input type="number" v-model="ppQuantity">

My html code like this :

<div id="app">
  <input type="number" v-model="quantity"/>
</div>

My vue component like this :

new Vue({
  el: '#app',
  data: {
    quantity: ''
  },
  watch: {
    quantity (val) {
      this.quantity = val.replace('.', '')
    }
  }
})

Demo and full code like this : https://jsfiddle.net/50wL7mdz/67375/

For example

I input 10.2, it will automatic to be 102

If I input 10..2, it not automatic to be 102

So if multiple dot, it does not work

How can I solve this problem?

解决方案

Because you are using type="number", the browser is doing some internal processing, so the value of the input (which is bound to your variable) is a Number, and is not exactly the same as the text in the box.

In particular, if the text in the box is not a valid number, the internal value is empty. When you type one '.', the value doesn't change: 10. and 10 are the same numeric value. When you type the 2nd '.', the value becomes invalid, so the internal value is empty. Somewhat confusingly, what you typed in the input stays visible, but there is no way to get at it.

Your options are to stop using type="number" in which case your code will work as written (but you don't have the up- and down-arrow functionality for changing the value), or to do something tricky.

Update: The solution below works relatively nicely by forcing a canonicalized version of the number to be used. The caveat is that your cursor will be moved to the end of the number each time you make a change. You can address that, but it's somewhat complicated so I didn't do it here.

new Vue({
  el: '#app',
  data: {
    quantity: ''
  },
  computed: {
    ppQuantity: {
      get() {
        return this.quantity;
      },
      set(val) {
        this.quantity = '';
        this.$nextTick(() => {
          this.quantity = val.replace('.', '');
        });
      }
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input type="number" v-model="ppQuantity">
</div>

这篇关于如何禁用输入类型编号上的所有点?Vue.js 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！