Текст фильтра ввода принимает только число и точку 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 быть вводом для научной записи