Фильтр входного текста для ввода только числа, а не даже десятичного - PullRequest
Новая
       10

Фильтр входного текста для ввода только числа, а не даже десятичного

0 голосов
/ 13 декабря 2018

Моя цель состоит в том, чтобы пользователь вводил только цифры от [0-9], даже десятичное число не допускается

Как это сделать?

Код 

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

<b-input> от buefy https://buefy.github.io/documentation/input/

Ответы [ 5 ]

0 голосов
/ 29 августа 2019

Шаблон 

<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>
0 голосов
/ 13 декабря 2018

Вы можете вызвать функцию по событию 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, '');
}
0 голосов
/ 13 декабря 2018

Я только начал использовать vue js, поэтому у меня мало знаний, но я думаю, что вы можете добавить прослушиватель событий и использовать reg ex в своей функции 

<input type="number" @input="checknum">

export default{
    methods: {
        checknum: function (event) {
            this.value = this.value.replace(/[^0-9]/g, '');
        }
    }
}
0 голосов
/ 13 декабря 2018

Из Beufy doc я получаю, что <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>
0 голосов
/ 13 декабря 2018

Пример кода 

 $('#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"  />
...