过滤输入文本，只输入数字，不输入小数

Question

我的目标是用户只输入[0-9]中的数字，甚至不允许使用十进制

如何做到这一点？

代码

<b-input expanded
type="number"
v-model="amount"
@input="updateValue()"
placeholder="{{ amount }}">
</b-input>

<b-input>来自buefyhttps://buefy.github.io/documentation/input/

Answer 1

从Beufy文档中，我了解到<b-input>本质上是原生<input>字段的扩展，因此它接受原生输入将接受的属性。

到目前为止，使用纯HTML属性(如pattern="d+"(不可能完全过滤掉特定字符。

您可以使用"keydown"事件侦听器通过各自的键使用本机event.preventDefault()过滤掉这些字符。当然，我们通常可以使用原生<input type="number">来提供帮助。

const app = new Vue({
el: '#app',
methods: {
filterKey(e){
const key = e.key;
// If is '.' key, stop it
if (key === '.')
return e.preventDefault();

// OPTIONAL
// If is 'e' key, stop it
if (key === 'e')
return e.preventDefault();
},

// This can also prevent copy + paste invalid character
filterInput(e){
e.target.value = e.target.value.replace(/[^0-9]+/g, '');
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input
type="number"
step="1"
min="0"

@keydown="filterKey"
// OR 
@input="filterInput"
>
</div>

Answer 2

我刚刚开始使用vue js，所以我没有太多知识，但我认为你可以添加一个事件监听器，并在你的函数中使用reg ex

<input type="number" @input="checknum">
export default{
methods: {
checknum: function (event) {
this.value = this.value.replace(/[^0-9]/g, '');
}
}
}

Answer 3

您可以在keyup事件上调用一个函数，检查所有非数字字符并从值中删除。例如：

// In template add this line
<input type="text" v-model="inputNumber" @keyup="onlyNumeric" />
// Define inputNumber in data.
// In Methods add onlyNumeric function
onlyNumeric() {
this.inputNumber = this.inputNumber.replace(/[^0-9]/g, '');
}

Answer 4

模板

<input type="number" 
v-model="amount" 
@input="updateValue" 
placeholder="amount" />

编写脚本

<script>
export default {
data() {
return {
amount: null,
}
},
methods: {
updateValue(e) {
e.target.value = e.target.value.replace(/[^0-9]+/g, '')
}
}
}
</script>

Answer 5

我不知道有时人们不理解，需要的是buefy输入哪种类型是文本，因为默认情况下它必须是空字符串，但当输入值是它唯一接受的数字时，这是我的答案：

输入标签：

<b-input
type="text"
v-model="onlyNumber"
:placeholder="'Input only number example: 345678'"
@keypress.native="isNumber($event)"
/>

脚本：

data() {
return {
onlyNumber: '',
};
},
methods: {
isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
evt.preventDefault();
}
return true;
},
},

优点：默认为空字符串，但只接受数字

Const：接受的数字将作为数字字符串进行结算例如："；333214234"；，只要转换成数字，如果你有需要的数字形式

Answer 6

示例代码

$('#numberfield').on('input', function(event) {
console.log(parseInt(event.target.value))
event.target.value = parseInt(event.target.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="numberfield" type="number"  />

Answer 7

如果您使用Vuetifyjs，您可以使用规则指令，如下所示：

模板

<v-textfield type="number" v-model="amount" 
:rules="theForm.myRules" placeholder="{{amount}}"> </v-textfield>

脚本

export default {
data() {
return {
amount: null,
theForm: {
myRules: [
v => /[^0-9]/.test(v) || 'Input Invalid'
]
}
};
}
};