我有一个文本框，只想使用Vue.js接受“ Number”和“。[dot]”，有人可以帮助提供代码吗？我是vue的新手。
您可以编写Vue方法，并且可以在keypress事件上调用该方法。签出this fiddle。
更新：
添加源代码：
<div id="demo">
<input v-model="message" @keypress="isNumber($event)">
</div>
var data = {
message: 1234.34
}
var demo = new Vue({
el: '#demo',
data: data,
methods: {
isNumber: function(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
evt.preventDefault();;
} else {
return true;
}
}
}
});
<v-text-field class='reqField' label="NUMBER" @keypress="isNumber($event)"></v-text-field>
methods: {
isNumber: function(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57) && (charCode != 9)) {
evt.preventDefault();
} else {
return true;
}
`enter code here`
},
}
简短易懂。
HTML
<input @keypress="onlyNumber" type="text">
VUE JS
onlyNumber ($event) {
//console.log($event.keyCode); //keyCodes value
let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) { // 46 is dot
$event.preventDefault();
}
}
您应该将输入更改为type="number"，以更准确地反映您的行为。然后，您可以使用内置的Vue.js指令v-model.number。
用法：
<input type="number" v-model.number="data.myNumberData"/>
我通过vue.js过滤器解决了像您这样的问题。首先，我创建了过滤器-假设在filter.js文件中
export const JustDigits = () => {
Vue.directive('digitsonly', (el, binding) => {
if (/[\d\.]+/i.test(el.value)) {
console.log('ok');
} else {
let newValue = el.value.replace(/[a-zA-Z]+/ig, '');
el.value = newValue;
console.log('should fix', newValue);
binding.value = el.value;
}
});
};
然后在我需要此功能的组件中：
import {
JustDigits
} from './filters';
JustDigits();
然后您就可以在模板中使用此伪指令：
<input v-model="myModel"
v-digitsonly
type="text"
maxlength="4" class="form-control" id="myModel" name="my_model" />
[请注意，我的正则表达式可能与您所需要的不同，请随时对其进行修改，以及此代码行let newValue = el.value.replace(/[a-zA-Z]+/ig, '');从字符串中删除字符。我发布它只是为了向您展示vue.js提供的解决此类问题的可能解决方案之一。
这是通过使用以下指令设置v-restrict.number.decimal来处理所询问的特定问题（仅数字和“点”的一种更好的方法。它还具有一些仅支持字母或字母数字的奖励代码。您也只能允许“点”，尽管我不知道为什么。如果快速键入，将不允许多余的字符“潜入”。它还支持复制/粘贴，删除以及用户希望通过输入仍然可以使用的其他一些键：
Vue.directive('restrict', {
bind (el, binding) {
el.addEventListener('keydown', (e) => {
// delete, backpsace, tab, escape, enter,
let special = [46, 8, 9, 27, 13]
if (binding.modifiers['decimal']) {
// decimal(numpad), period
special.push(110, 190)
}
// special from above
if (special.indexOf(e.keyCode) !== -1 ||
// Ctrl+A
(e.keyCode === 65 && e.ctrlKey === true) ||
// Ctrl+C
(e.keyCode === 67 && e.ctrlKey === true) ||
// Ctrl+X
(e.keyCode === 88 && e.ctrlKey === true) ||
// home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
return // allow
}
if ((binding.modifiers['alpha']) &&
// a-z/A-Z
(e.keyCode >= 65 && e.keyCode <= 90)) {
return // allow
}
if ((binding.modifiers['number']) &&
// number keys without shift
((!e.shiftKey && (e.keyCode >= 48 && e.keyCode <= 57)) ||
// numpad number keys
(e.keyCode >= 96 && e.keyCode <= 105))) {
return // allow
}
// otherwise stop the keystroke
e.preventDefault() // prevent
}) // end addEventListener
} // end bind
}) // end directive
要使用：
<!-- number and decimal -->
<input
v-model="test"
v-ep-restrict.number.decimal
...
/>
<!-- alphanumeric (no decimal) -->
<input
v-model="test2"
v-ep-restrict.alpha.number
...
/>
<!-- alpha only -->
<input
v-model="test3"
v-ep-restrict.alpha
...
/>
可以修改为几乎任何情况的基础，并且良好的键控代码列表是here
我需要我的输入内容仅允许数字，因此没有e符号，正负号或.。 Vue看起来很时髦，并且不会像dot这样的符号重新触发@onkeypress。
这是我对这个问题的解决方案：
<input onkeypress="return event.key === 'Enter' || (Number(event.key) >= 0 && Number(event.key) <= 9" type="number" >我只接受数字，范围从0到9，但我也希望在Enter上启用表单提交功能，但上述方法将它排除在外-因此使用enter。
在一行中执行此操作的简单方法：
[基于先前的解决方案，为防止出现多个小数位，还将v模型传递给函数：
我不能提供完美的解决方案，因为有些工作需要输入，但不能复制粘贴，有些则相反。这个解决方案对我有用。它可以防止输入负数，键入“ e”，复制并粘贴“ e”文本。