У меня есть текстовое поле, которое хочет принять "Number" и ". [dot]", используя Vue.js, кто-нибудь может помочь в коде? Я новичок в vue.
Текст фильтра ввода принимает только число и точку vue.js
Ответ 1
Вы можете написать метод Vue, и этот метод может быть вызван для события нажатия клавиши. Проверьте эту скрипку.
Обновить:
добавление исходного кода:
HTML
<div id="demo">
<input v-model="message" @keypress="isNumber($event)">
</div>
Vue.js
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;
}
}
}
});
Ответ 2
Коротко и легко понять.
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();
}
}
Ответ 3
Вы должны изменить свой ввод на type="number"
чтобы более точно отразить ваше поведение. Затем вы можете использовать встроенную директиву Vue.js v-model.number
.
Использование:
<input type="number" v-model.number="data.myNumberData"/>
Ответ 4
Я решил проблему, подобную вашей, через фильтры vue.js. Сначала я создал фильтр - скажем в файле filters.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 обеспечивает решение такой задачи.
Ответ 5
Вот лучший способ справиться с конкретным заданным вопросом (только числа и "точки"), установив 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
...
/>
Это может быть изменено, чтобы служить основой практически для любого сценария, и хороший список кодов ключей здесь
Ответ 6
Мне нужно было вводить только цифры, чтобы не было символа e
, плюс, минус или или .
, Vue выглядит в стиле фанк и не вызывает @onkeypress для таких символов, как dot
.
Вот мое решение этой проблемы:
<input
onkeypress="return event.key === 'Enter'
|| (Number(event.key) >= 0
&& Number(event.key) <= 9"
type="number"
>
Я беру только цифры, ограничивающие от 0 до 9, но я также хочу разрешить отправку формы при вводе, что было бы исключено при вышеуказанном подходе - то есть при вводе.
Ответ 7
Я не могу сделать идеальное решение, так как некоторые работают для ввода, но не для копирования и вставки, некоторые наоборот. Это решение работает для меня. Это предотвращает от отрицательного числа, набрав "е", скопируйте и вставьте "е" текст.
Я использую миксин, поэтому меня можно возобновить где угодно.
const numberOnlyMixin = {
directives: {
numericOnly: {
bind(el, binding, vnode) {
// console.log(el, binding);
// this two prevent from copy&paste non-number text, including "e".
// need to have both together to take effect.
el.type = 'number';
el.addEventListener('input', (e) => {
// console.log('input', e);
// console.log(el.validity);
return el.validity.valid || (el.value = '');
});
// this prevents from typing non-number text, including "e".
el.addEventListener('keypress', (e) => {
let charCode = (e.which) ? e.which : e.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
e.preventDefault();
} else {
return true;
}
});
}
}
},
};
export {numberOnlyMixin}
В вашем компоненте, добавьте к вашему входу.
<input v-model="myData" v-numericOnly />
Ответ 8
Простой способ сделать это в одну строку:
IsNumber(event) {
if (!/\d/.test(event.key) && event.key !== '.') return event.preventDefault();
}
Ответ 9
Имейте в виду, что это все еще позволит E быть вводом для научной записи