web-dev-qa-db-fra.com

Filtrer le texte d'entrée uniquement accepter numéro et dot vue.js

j'ai une zone de texte que veux accepter "Nombre" et ". [point]" en utilisant Vue.js, n'importe qui peut aider le code? je suis nouveau sur vue.

vue.js
9
Muh Ghazali Akbar

Vous pouvez écrire une méthode Vue et cette méthode peut être appelée par l’événement keypress. Découvrez ce violon .

Mettre à jour:

ajout du code source:

HTML

<div id="demo">
  <input v-model="message" v-on: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;
      }
    }
  }
});
32
Deendayal Garg

J'ai résolu le problème comme le vôtre via les filtres de vue.js. D'abord, j'ai créé un filtre - disons dans le fichier 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;
    }
  });
};

Ensuite, dans le composant où cette fonctionnalité est requise, j’ai fait:

import {
  JustDigits
} from './filters';

JustDigits();

Et vous pourrez ensuite utiliser cette directive dans un modèle:

 <input  v-model="myModel"
         v-digitsonly
         type="text"  
         maxlength="4"  class="form-control" id="myModel" name="my_model" />

Veuillez noter que mon expression régulière peut différer de ce dont vous avez besoin, n'hésitez pas à la modifier ainsi qu'à cette ligne de code let newValue = el.value.replace(/[a-zA-Z]+/ig, ''); qui supprime les caractères de la chaîne. Je l’ai posté juste pour vous montrer l’une des solutions possibles que vue.js fournit pour résoudre une tâche comme celle-ci.

6
flamedmg

Comprendre court et facile.

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
Mengseng Oeng

Vous devez modifier votre saisie en type="number" afin de refléter plus précisément votre comportement. Vous pouvez ensuite utiliser la directive Vue.js intégrée v-model.number.

Usage:

<input type="number" v-model.number="data.myNumberData"/>
2
JBeagle

Voici une meilleure façon de traiter la question spécifique posée (chiffres et "points" uniquement) en définissant v-restrict.number.decimal à l'aide de la directive suivante. Il y avait aussi un code bonus pour supporter alpha uniquement ou alphanumérique. Vous pouvez également n'autoriser que les "points" bien que je ne sache pas pourquoi. Il ne permettra pas aux caractères supplémentaires de se faufiler si vous tapez rapidement. Il prend également en charge les fonctions copier/coller, supprimer et certaines autres clés que les utilisateurs s'attendent à pouvoir continuer à utiliser à partir d'une entrée: 

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

Utiliser:

<!-- 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
  ...
/>

Ceci peut être modifié pour servir de base à n'importe quel scénario et une bonne liste de codes de clé est ici

0
D Durham

Je ne peux pas la solution parfaite car certains travaillent pour la saisie mais pas pour le copier-coller, certains sont l'inverse. Cette solution fonctionne pour moi. Il empêche de nombre négatif, en tapant "e", copier et coller le texte "e".

J'utilise mixin pour pouvoir être retrouvé n'importe où.

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}

Dans votre composant, ajoutez à votre entrée.

<input v-model="myData" v-numericOnly />
0
Arst

J'avais besoin de mon entrée pour n'autoriser que les chiffres, donc aucun symbole e, plus, moins ou ou .. Vue semble funky et ne re-déclenche pas @onkeypress pour des symboles tels que dot.

Voici ma solution à ce problème:

<input
  onkeypress="return event.key === 'Enter'
    || (Number(event.key) >= 0
    && Number(event.key) <= 9"
  type="number"
>

Je ne prends que des chiffres, en limitant de 0 à 9, mais je souhaite également permettre l’envoi de formulaire sur Entrée, ce qui serait exclu avec l’approche ci-dessus - d’où l’entrée.

0
Adam