Filtre d'entrée de texte acceptons seulement le nombre et le point vue.js
j'ai une zone de texte ne voulez accepter le "Nombre" et ".[dot]" à l'aide de Vue.js, on peut aider le code? je suis nouveau sur vue.
Je sais que c'est une vieille question, mais elle était en haut dans les résultats de Google. Voici donc une solution pour les utilisateurs avec le même problème. Je pense que toutes les solutions sont complexes. La chose la plus simple à faire est d'ajouter @événement d'entrée et de remplacer tous les chiffres et le point.
permet de multiples points = problème.
this.message.replace(/[^0-9.]/g,'');
. Voici un violon à démontrer.permet de multiples points = problème.
OriginalL'auteur Muh Ghazali Akbar | 2016-09-30
Vous devez vous connecter pour publier un commentaire.
Vous pouvez écrire une Vue de la méthode, et cette méthode peut être appelée sur le keypress événement. Découvrez ce violon.
Mise à jour:
l'ajout du code source:
HTML
Vue.js
Afin de ne pas autoriser le changement de période de
charCode !== 46
àcharCode === 46
Je l'ai fait et ça fonctionne bien, sauf pour une chose. Je devais définir l'événement en données ou de jeter une erreur de la console. J'ai simplement ajouté de l'événement": null," et plus d'erreurs!
En fait la liaison doit être
v-on:keypress="isNumber($event)"
J'ai essayé dans votre js fiddle, et je peux d'entrée de plus de 1 période. Il doit être de 1 seulement. Comment faire?
OriginalL'auteur Deendayal Garg
J'ai résolu le problème comme le vôtre via vue.js les filtres. J'ai d'abord créé filtre - disons dans filters.js fichier
Puis dans le composant où cette fonctionnalité est requise que j'ai fait:
Et puis vous êtes en mesure d'utiliser cette directive dans le modèle:
Veuillez noter, que ma regex peuvent différer de ce que vous avez besoin, n'hésitez pas à le modifier ainsi que 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 vue.js fournit à résoudre des tâches de ce genre.Vous pouvez éviter la saisie rapide des caractères supplémentaires à obtenir bien que par emballage de la valeur en une demi-seconde ou deux anti-rebond (importation en provenance de lodash ou unserscore) avant de vérifier qu'il
OriginalL'auteur flamedmg
Court et facile à comprendre.
HTML
VUE JS
Vous pouvez vérifier le code de clé à l'aide de ce code de la console.log($event.keyCode); //keyCodes valeur
OriginalL'auteur Mengseng Oeng
Vous devriez changer votre entrée à
type="number"
afin de refléter avec plus de précision votre comportement. Vous pouvez ensuite utiliser le haut-Vue.js la directivev-model.number
.Utilisation:
Certains navigateurs ont
onScroll
pourtype=number
, qui incrémenter/décrémenter les valeurs.OriginalL'auteur JBeagle
J'ai besoin de mon entrée pour permettre seulement des chiffres, donc pas de
e
symbole, plus, moins ou ou.
. Vue semble funky et ne pas re-déclencher @onkeypress, de symboles, commedot
.Voici ma solution à ce problème:
Je prends uniquement les chiffres, la limitation de 0 à 9, mais aussi je ne veux activer soumettre le formulaire sur Entrée, qui seraient exclus avec l'approche ci-dessus - ainsi l'entrée.
OriginalL'auteur Adam
Ici est une meilleure façon de gérer la question posée (nombres et des "points" seulement) par la mise en v-limiter.numéro.décimal à l'aide de la directive suivante. Elle a également eu quelques bonus code alpha en charge seul ou alphanumérique. Vous pouvez également autoriser uniquement les "points", bien que je ne sais pas pourquoi vous le feriez. Il ne permettra pas à des caractères supplémentaires pour "se faufiler à travers" si de frappe rapide. Il prend également en charge le copier/coller, supprimer, et quelques autres touches les utilisateurs s'attendent à encore du travail à partir d'une entrée:
À utiliser:
Ce qui peut être modifié pour servir de base pour à peu près n'importe quel scénario et une bonne liste de codes de clé est ici
OriginalL'auteur D Durham
Je ne peux pas la solution parfaite, comme certains travaux pour l'entrée, mais pas pour copier&coller, certains sont dans l'autre sens. Cette solution fonctionne pour moi. Il prévient d'un nombre négatif, le fait de taper "e", copie&coller "e" du texte.
- Je utiliser mixin, donc je peux être resued n'importe où.
Dans votre composant, l'ajouter à votre entrée.
OriginalL'auteur Arst