如何禁用輸入類型編號上的所有點？ vue.js 2

我的HTML這樣的代碼：如何禁用輸入類型編號上的所有點？ vue.js 2

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

我VUE成分是這樣的：

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

演示和全碼是這樣的：https://jsfiddle.net/50wL7mdz/67375/

例如

我輸入10.2，它會自動變爲102

如果我輸入10..2，它不是自動成爲102

因此，如果多點，這是行不通的

我怎樣才能解決這個問題？

來源

2017-10-09 Success Man

@str，這不是重複。我曾嘗試過。我嘗試：'this.quantity = val.replace（/../ g，''）'不起作用 –

當類似'10..'的無效數字是'type =「number」'時，這個值爲null輸入 –

查看https://stackoverflow.com/questions/18852244/how-to-get-the-raw-value-an-input-type-number-field –

由於您使用的是type="number"，因此瀏覽器正在進行一些內部處理，所以輸入（與您的變量綁定）的value是一個數字，並且與框中的文本不完全相同。

特別是，如果框中的文本不是有效的數字，則內部值爲空。當輸入'。'時，值不會改變：10.和10是相同的數值。當輸入第二個「。」時，該值變爲無效，所以內部值爲空。有點混淆的是，你在輸入中輸入的內容保持可見，但是there is no way to get at it。

您的選擇是停止使用type="number"在這種情況下，您的代碼將以書面形式工作（但您沒有用於更改值的上下箭頭功能），或執行一些棘手的操作。

更新：下面的解決方案通過強制使用規範化版本的數字來工作得相當好。需要注意的是，每次進行更改時，光標都會移到數字的末尾。你可以解決這個問題，但是it's somewhat complicated所以我沒有在這裏做。

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>

來源

2017-10-09 16:35:42

它的工作原理。但是，如果我輸入102，然後單擊10和2.然後我輸入點，它可以是輸入點。結果：10.2 –

更新了片段。 –

好的。謝謝。似乎你的解決方案是最好的解決方案 –

如何禁用輸入類型編號上的所有點？ vue.js 2

回答

相關問題